详解vue表单验证组件 v-verify-plugin

npm install vue-verify-plugin

<div>  <div>    <input type="text" placeholder="姓名" v-verify.grow1="username" v-model="username"/>    <label v-verified="verifyError.username"></label>  </div>  <div>    <input type="password" placeholder="密码" v-verify.grow1="pwd" v-model="pwd"/>    <label v-verified="verifyError.pwd"></label>  </div>  <button v-on:click="submit">确认</button> </div>

import Vue from "vue";import verify from "vue-verify-plugin";Vue.use(verify);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;    }  }}

//自定义teacher分组v-verify.teacher//自定义student分组v-verify.student//验证时可分开进行验证 //验证student 分组this.$verify.check("student")//验证teacher 分组this.$verify.check("teacher")//验证所有this.$verify.check();

<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><!--展示所有错误--><label v-verified.join="$verify.$errors.username">

var myRules={  phone:{    test:/^1[34578]/d{9}$/,    message:"电话号码格式不正确"  },  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});