element ui 表单自定义校验规则

表单信息

  
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
    
      
        
        
      
    
    
      
        
      
    
  
  
    重置
    保 存
  

自定义一些校验规则（data()下面）

// 自定义校验规则
// 登录账号验证，只能是唯一
let validUsername = (rule, value, callback) => {
  if (value == "" || value == undefined) {
    callback();
  } else {
    // 查询数据库是否存在该登录用户名
    this.queryUserNameUnique(value).then(res => {
      if (res == null) {
        callback();
      } else {
        console.log(res);
        callback(new Error("该账号已经存在"));
      }
    });
  }
};
// 手机号码校验
let validMobile = (rule, value, callback) => {
  if (value == "" || value == undefined) {
    callback();
  } else {
    let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!reg.test(value)) {
      callback(new Error("手机号码格式不正确"));
    } else {
      callback();
    }
  }
};
// 邮箱校验
let validEmail = (rule, value, callback) => {
  if (value == "" || value == undefined) {
    callback();
  } else {
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!reg.test(value)) {
      callback(new Error("邮箱格式不正确"));
    } else {
      callback();
    }
  }
};

vue-rules 中使用

mobileNo: [
      { required: true, message: "请输入手机号码", trigger: "blur" },
      // 使用自定义校验
      { validator: validMobile, trigger: "blur" }
    ],
    email: [
      // 使用自定义校验
      { validator: validEmail, trigger: "blur" }
    ]