详解vue表单验证组件 v-verify-plugin
前端之家收集整理的这篇文章主要介绍了
详解vue表单验证组件 v-verify-plugin,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_
404_0@js
export default{
data:function(){
return {
username:"",pwd:""
}
},methods:{
submit:function(){
if(this.$verify.check()){
//通过验证
}
}
},verify:{
username:[
"
required",{
test:function(val){
if(val.length<2){
return false;
}
return true;
},message:"姓名不得小于2位"
}
],
pwd:"
required"
},
computed:{
verifyError:function(){
return this.$verify.$errors;
}
}
}
@H_
404_0@
指令说明
@H_
404_0@
v-verify
@H_
404_0@v-erify 在表单控件元素上创建数据的验证规则,他会
自动匹配要验证的值以及验证的规则。
@H_
404_0@
v-verify 修饰符说明
@H_
404_0@该指令最后一个修饰符为
自定义分组
自定义teacher分组
v-verify.teacher
//
自定义student分组
v-verify.student
//验证时可分开进行验证
//验证student 分组
this.$verify.check("student")
//验证teacher 分组
this.$verify.check("teacher")
//验证所有
this.$verify.check();
@H_
404_0@
v-verified
@H_
404_0@v-verified
错误展示,当有
错误时会展示,没有
错误时会
加上style:none,默认会展示该数据所有
错误的第一条
@H_
404_0@该指令为语法糖(见示例)
<label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]">
<label v-verified="$verify.$errors.username">
<label v-verified.join="$verify.$errors.username">
@H_
404_0@
修饰符说明
@H_
404_0@.join 展示所有
错误 用逗号隔开
@H_
404_0@
6) {
return false
}
return true;
},message:"最大为6位"
}
}
import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify,{
rules:myRules
});
@H_
404_0@以上就是本文的全部
内容,希望对大家的学习有所帮助,也希望大家多多
支持编程之家。