npm安装vee-validate——保存
#或
纱添加vee-validate——保存
本文中使用的VeeValidate版本为2.1.5
在App.vue中引入
从“进口VeeValidate vee-validate ';
Vue.use (VeeValidate);
之前
<>强例子
第一个测试例子
& lt; template>
& lt; div类=皌est1”比;
& lt; div>
& lt;输入
type=" text "
name="昵称"
v模型=" formData.nickname "
v-validate=耙髚分钟:3 |马克斯:10“”
比;
& lt; p> {{errors.first(昵称)}}& lt;/p>
& lt;/div>
& lt; div>
& lt;按钮@click=" handleSubmit "祝辞Submit
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“test1”,
数据(){
返回{
formData: {
昵称:”,
密码:”,
}
}
},
方法:{
handleSubmit () {
validator.validate美元。()
不要犹豫((有效的)=比;{
如果(真的===有效){
console.log(“验证通过的);
其他}{
console.log(这一点。validator.errors.all美元());
}
}）
}
}
}
& lt;/script>
& lt;风格范围lang=" css "比;
.test1 {
宽度:900 px;
保证金:0汽车;
}
& lt;/style>
更多配置请参考官网!
我们只是用些常用配置和常用的验证!
<强>中文配置
全局配置
进口VeeValidate,从“vee-validate”{验证器};
从“进口zh_CN vee-validate/dist/地区/zh_CN ';
Vue。使用(VeeValidate, {
字典:{
zh_CN: zh_CN
}
});
Validator.localize (zh_CN);
之前
这样就可以使用中文提示了!
<>强自定义错误提示
& lt; template>
& lt; div类=皌est2”比;
& lt; div> & lt;输入类型=v模型=" formData“文本”。绰号“data-vv-name="昵称" v-validate="的要求|分钟:3 |马克斯:10”“比;
& lt;/div>
& lt; div> {{errors.first(昵称)}}& lt;/div>
& lt; div> & lt;输入类型=v模型=" formData“文本”。密码" data-vv-name="密码" v-validate="的要求|分钟:5 |马克斯:200年“比;
& lt;/div>
& lt; div> {{errors.first(密码)}}& lt;/div>
& lt; div>
& lt;按钮@click=" handleSubmit "祝辞Submit
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
const验证={
自定义:{
昵称:{
要求:()=比;“昵称不得为空',//写法1
敏:“昵称不得小于3个字符",//写法2
马克斯:()=比;“昵称不得大于10个字符”
},
密码:{
要求:()=比;“密码不得为空”,
敏:“密码不得小于5个字符”,
马克斯:()=比;“密码不得大于200个字符”
}
},
};
出口默认{
名称:“test2”,
数据(){
返回{
formData: {
昵称:”,
密码:”,
}
}
},
方法:{
handleSubmit () {
validator.validate美元。()
不要犹豫((有效的)=比;{
如果(真的===有效){
console.log(“验证通过的);
其他}{
console.log(这一点。validator.errors.all美元());
}
}）
}
},
安装(){
美元的验证器。本地化(zh_CN,验证);
}
}
& lt;/script>
之前
<>强自定义验证规则
& lt; template>
& lt; div类=皌est2”比;
& lt; div> & lt;输入类型=v模型=" formData“文本”。绰号“data-vv-name="昵称" v-validate="的要求|分钟:3 |马克斯:10”“比;
& lt;/div>
& lt; div> {{errors.first(昵称)}}& lt;/div>
& lt; div> & lt;输入类型=v模型=" formData“文本”。密码" data-vv-name="密码" v-validate="的要求|分钟:5 |马克斯:200年“比;
& lt;/div>
& lt; div> {{errors.first(密码)}}& lt;/div>
& lt; div> & lt;输入类型=v模型=" formData“文本”。re_password re_password“data-vv-name=v-validate=" |需要确认”比;
& lt;/div>
& lt; div> {{errors.first (re_password)}} & lt;/div>
& lt; div> & lt;输入类型=v模型=" formData“文本”。移动" data-vv-name="移动" v-validate="要求|移动”比;
& lt;/div>
& lt; div> {{errors.first(“移动”)}}& lt;/div>
& lt; div>
& lt;按钮@click=" handleSubmit "祝辞Submit
