詳解vue表單驗(yàn)證組件 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">確認(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()){
        //通過(guò)驗(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)證時(shí)可分開(kāi)進(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>
<!--等價(jià)于-->
<label v-verified="$verify.$errors.username"></label>
<!--展示所有錯(cuò)誤-->
<label v-verified.join="$verify.$errors.username">

var myRules={
  phone:{
    test:/^1[34578]\d{9}$/,
    message:"電話(huà)號(hào)碼格式不正確"
  },
  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
});