vue表单验证自定义验证规则详解

本文实例为大家分享了vue表单验证自定义验证规则，供大家参考，具体内容如下

这是公司里Vue+Element UI的项目。写的验证规则放图：

样式代码：

  
情况反馈表
  
     
         
           
           
             
             
             
             
              
              
                
          
         
           
           
           
           
            
          
            
          
          
          提交
            
     

js代码:

data(){
  return{
     rules:{
        way:[
         { required: true, message: '请输入听取意见方式', trigger: 'change' }
         ],
        attitude:[
           { required: true, message: '请输入人员态度', trigger: 'change' }
         ]
         }
    }
}

记住form表单一定要“:rules=“rules（自己定义）””，下面是自定义规则，放图：

样式代码：

            
                
                {{username}}
            
            
                
                
            
            
                
            
            
                
            
            
                提交
            

js代码:

data(){
      //这里是自定义的规则
        var newpwdmin=(rule, value, callback)=>{
            if(!value){
               return callback(new Error('请输入密码'));
              }else if(value !==this.Formname.newpwd){
                return callback(new Error('两次输入密码不一致!'));
              }else {
                 callback()
             }
        }
      return{
      editFormPwd:{
           oldpwd:[{    required: true, message: '请输入原密码', trigger: 'blur'}],
           newpwd:[{ required: true, message: '请输入密码', trigger: 'blur' },],
           newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],
               }
     }
}

提交返回什么就不写了；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。