如何在 vue 中使用验证

Question

我在表单中使用了 validate 指令来验证内容。

<input type="text" v-model="address" name="address" ref="address" v-validate="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" data-vv-validate-on="blur">

但它返回如下错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: validate

如何解决？

Answer 1

如docs中提到的：

我们可以通过Vue.use() 全局方法使用VeeValidate 插件，例如：

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

或直接包含脚本，如：

<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
    Vue.use(VeeValidate); // good to go.
</script>

演示：

Vue.use(VeeValidate);
new Vue({
  el: "#app",
  data: {
    address: ''
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vee-validate@<3.0.0"></script>
<div id="app">
  <form>
    <span>Enter some text, then remove focus from textbox to validate</span><br/>
    <input type="text" v-model="address" name="address" ref="address" v-validate="{ regex:/^([0-9]+|[0-9]+,[0-9]{0,2}?)$/ }" data-vv-validate-on="blur">
    
    <br/>
    <span>{{ errors.first('address') }}</span>
  </form>
</div>