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

npm install vue-verify-plugin

  

    
    
  
  

    
    
  
  确认
 

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();

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
});