1.安装
npm
npm install vee-validate --save
2.引入
import
Vue
from '
vue'
import
zh_CN
from '
vee-validate/dist/locale/zh_CN';
import
VeeValidate, {
Validator }
from '
vee-validate';
Validator.
localize('
zh_CN',
zh_CN);//使用中文语言
Vue.
use(
VeeValidate);
3.使用
<
input
label="
注册地址"
placeholder="
注册地址"
type="
text"
v-model="
formData.
address"
data-vv-as="
注册地址"
name="
address"
v-validate="{ required:
true,}" />
<
span
class="
errTips"
v-show="
errors.
has('
address')">
{{
errors.
first('
address')}}
</
span>
name->校验的标识, data-vv-as: 绑定对应的别名(设置了默认语言的时候会用到,默认为英文提示en)
v-validate:设置使用的规则 两种方式
v-validate="{ required:
true,isMobile:
true}"
v-validate="'required|isMobile'"
提醒:错误信息里面的名称通常就是表单的name属性,除非是通过Vue实例传递进来的。
提醒:养成好习惯,给每个field添加name属性,如果没有name属性,validator可能不会对其进行正确的校验
4.添加自定义规则
//添加自定义规则
Validator.
extend('
isMobile', {
getMessage:
field
=> "
请输入正确的手机号码",
validate:
value
=> {
return
value.length ==
11 &&
/
^
((13|
14|
15|
17|
18)
[0-9]{1}
\d{8}
)
$/.
test(
value)
}
});
Validator.
extend('
isMobile', (
value,
args)
=> {
// Return a Boolean or a Promise that resolves to a boolean.
});
5.修改内置规则的错误提示
// 修改默认规则的错误提示
const
dictionary = {
zh_CN: {
messages: {
required: (
name)
=> `
${
name
}不能为空!`}
// name接受aliases(data-vv-as属性)的值.
}
};
const
dictionary
= {
en: {
messages:{
alpha
: ()
=>
'
Some English Message
'
}
},
zh_CN
: {
messages: {
alpha: '
不能为空
'
}
}
};
Validator.
localize(
dictionary);
zh_CN:中文提示(需要引入中文语言包)
自定义规则和修改提示都可以在main.js里添加,也可以在当前vue组件里添加.