verify
install
npm install vue-verify-plugin
use
<template>
<div class="input-box clearFix">
<div>
<input v-model="age" v-verify="age" placeholder="age"/>
<label class="fl" v-remind="age"></label>
</div>
<div>
<input type="text" class="phoneIcon fl" placeholder="手机号码" v-model="regInfo.phone" v-verify="regInfo.phone">
<label class="fl" v-remind="regInfo.phone"></label>
</div>
<button v-on:click="submit">提交</button>
</div>
</template>
<script>
import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify,{
blur:true
});
export default {
name: 'app',
data () {
return {
age:"",
regInfo: {
phone: ""
}
}
},
verify: {
age:"required",
regInfo: {
phone: ["required","mobile"]
}
},
methods:{
submit: function () {
console.log(this.$verify.check());
}
}
}
</script>
验证错误信息说明
验证之后的错误存储在 vm.$verify.$errors 中，可自行打印出 vm.$verify.$errorArray 存储上一次验证的错误
配置说明
配置传入一个对象
{
rules:{}//自定义验证方法
blur:Bool //失去焦点时 是否开启验证
}
指令说明
v-verify
在表单控件元素上创建数据的验证规则，他会自动匹配要验证的值以及验证的规则。
v-verify 修饰符说明
该指令最后一个修饰符为自定义分组
//自定义teacher分组
v-verify.teacher
//自定义student分组
v-verify.student
//验证时可分开进行验证
//验证student 分组
this.$verify.check("student")
//验证teacher 分组
this.$verify.check("teacher")
//验证所有
this.$verify.check();
v-verify指令也可使用 arg参数进行验证分组
如果同时使用修饰符和arg分组 则arg会覆盖修饰符分组
v-verify:student
//验证student 分组
this.$verify.check("student")
v-remind 验证错误提示
v-remind修饰符说明
.join 展示所有错误 用逗号隔开
v-verified (在2.0版本中 被v-remind替代)
v-verified 错误展示，当有错误时会展示，没有错误时会加上style:none,默认会展示该数据所有错误的第一条 该指令为语法糖(见示例)
<input v-model="username" v-verify="username">
<label v-show="$verify.$errors.username && $verify.$errors.username.length" v-text="$verify.$errors.username[0]"></label>
<!--等价于-->
<label v-verified="$verify.$errors.username"></label>
v-verified 修饰符说明
.join 展示所有错误 用逗号隔开
默认验证规则
email 邮箱规则验证mobile 手机号码验证required 必填url 链接规则验证maxLength 最多maxLength个字符串(可自定义message)minLength 最少minLength个字符串(可自定义)
<script>
verify: {
username: [
"required",
{
minLength:2,
message: "姓名不得小于两位"
},
{
maxLength:5,
message: "姓名不得大于5位"
}
],
mobile:["required","mobile"],
email:"email"
url:"url"
pwd: {
minLength:6,
message: "密码不得小于6位"
}
},
</script>
自定义验证规则
<template>
<div class="input-box clearFix">
<div>
<input v-model="age" v-verify="age" placeholder="age"/>
<label class="fl" v-remind="age"></label>
</div>
<div>
<input type="text" class="phoneIcon fl" placeholder="手机号码" v-model="regInfo.phone" v-verify="regInfo.phone">
<label class="fl" v-remind="regInfo.phone"></label>
</div>
<div>
<input v-model="teacher" v-verify="age" placeholder="teacher"/>
<label class="fl" v-remind="teacher"></label>
</div>
<button v-on:click="submit">提交</button>
</div>
</template>
<script>
import Vue from "vue";
import verify from "vue-verify-plugin";
var myRules={
max6:{
test:function(val){
if(val.length>6) {
return false
}
return true;
},
message:"最大为6位"
}
}
import Vue from "vue";
import verify from "vue-verify-plugin";
Vue.use(verify,{
rules:myRules
});
export default {
name: 'app',
data () {
return {
age:"",
teacher:"",
regInfo: {
phone: ""
}
}
},
verify: {
age:"required",
teacher:"max6",
regInfo: {
phone: ["required","mobile"]
}
},
methods:{
submit: function () {
console.log(this.$verify.check());
}
}
}
</script>
转载于:https://www.cnblogs.com/fm060/p/7645239.html
相关资源：详解vue表单验证组件 v-verify-plugin
