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">確認(rèn)</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()){        //通過驗(yàn)證        }    }  },  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//驗(yàn)證時可分開進(jìn)行驗(yàn)證 //驗(yàn)證student 分組this.$verify.check("student")//驗(yàn)證teacher 分組this.$verify.check("teacher")//驗(yàn)證所有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});