Vue+elementUl表单正则验证（验证手机号，邮箱，密码）

效果：

需求：

  给form表单增加，手机号，邮箱，密码验证规则

代码实现：

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

 

    
    
      
      
        
          
        

        
          
        

        
          
        
        
          
        
        
          
        
        
          
        
        
          
        

        
          
            
              
                
                
              
            
          
        
      
      
      

        取消
        保存
      
    

 

 

js代码

data里定义验证规则,rules里引用

  data() {
    // 手机验证
    var validateMobilePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不可为空"));
      } else {
        if (value !== "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error("请输入有效的手机号码"));
          }
        }
        callback();
      }
    };
    // 邮箱验证
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    // 密码验证
    var validatePass = (rule, value, callback) => {
      const pwdReg = /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/;
      if (!value) {
        return callback(new Error("请输入密码"));
      } else if (pwdReg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入包含数字字母的不低于8位数的密码"));
      }
    };
 return{
     rules: {
        account: [{ required: true, validator: checkEmail, trigger: "change" }],
        mobile: [
          {
            required: true,
            validator: validateMobilePhone,
            trigger: "change",
          },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "change" },
        ],

      },
    form: {
        id: "",
        college_name: "", //高校名称
        account: "", //账户邮箱
        contact_name: "", //联系人
        mobile: "", //联系人手机号
        time_range3: "",
        password: "", //密码
        cooperation_start_time: "", //合作开始时间
        cooperation_end_time: "", //合作结束时间
        status: "1",
        remarks: "", //备注
        img: "", // 欢迎页
      },
 };
},

 

 

methods:

重置验证规则：this.$refs[form].resetFields(); 需要给设置ref="form"属性。

this.$refs[form].validata(valid)=>{

  if(valid){

    //只有验证规则通过才可以提交，否则不允许提交 。
   }else{

   return false

  } 

}

    methods: {
      //完成
      changeData(form){
        this.$refs[form].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
     //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }