el-form 自定义表单验证

el-form 自定义表单验证

新建formValidator.js文件

// 表单验证自定义正则


// 数字
export const checkNumber = (rule, value, callback) => {
  if (value) {
    var reg = /^[0-9]*$/
    if (reg.test(value) == false) {
      callback(new Error('不是数字'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 26个英文字母(大小写都行)
export const checkEnWord = (rule, value, callback) => {
  if (value) {
    var reg = /^[A-Za-z]+$/
    if (reg.test(value) == false) {
      callback(new Error('不是英文字母'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 中文  
export const checkCnWord = (rule, value, callback) => {
  if (value) {
    var reg = /^[u4e00-u9fa5]{0,}$/
    if (reg.test(value) == false) {
      callback(new Error('不是中文'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}


// 大于等于0的整数
export const checkInt = (rule, value, callback) => {
  if (value) {
    var reg = /^[1-9]\d*$|^0$/
    if (reg.test(value) == false) {
      callback(new Error('不是大于等于0的整数'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 大于等于0的数(正整数和小数)
export const checkIntFloat = (rule, value, callback) => {
  if (value) {
    var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
    if (reg.test(value) == false) {
      callback(new Error('不是大于等于0的数'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
export const checkEnNum = (rule, value, callback) => {
  if (value) {
    var reg = /^[A-Za-z0-9]+$/
    if (reg.test(value) == false) {
      callback(new Error('不是英文和数字'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 英文和数字(4-30位)
export const checkEnNumLength = (rule, value, callback) => {
  if (value) {
    var reg = /^[A-Za-z0-9]{4,40}$/
    if (reg.test(value) == false) {
      callback(new Error('不是英文和数字或长度不是4-30个字符'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}



// 验证身份证
export const checkCardCode = (rule, value, callback) => {
  if (value) {
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    if (reg.test(value) === false) {
      callback(new Error('身份证号格式错误'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 手机号校验
export const checkPhone = (rule, value, callback) => {
  if (value) {
    var reg = /^1([358][0-9]|4[579]|66|7[01235678]|9[189])[0-9]{8}$/
    if (reg.test(value) === false) {
      callback(new Error('不是正确的手机号'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 邮箱校验
export const checkEmail = (rule, value, callback) => {
  if (value) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
    if (reg.test(value) === false) {
      callback(new Error('邮箱格式错误'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 密码强度的校验  最少6位，最多30位, 至少1个大写字母，1个小写字母，1个数字，1个特殊字符
export const checkPassword = (rule, value, callback) => {
  if (value) {
    var reg = /^.*(?=.{6,30})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
    if (reg.test(value) === false) {
      callback(new Error('最少6位，最多30位, 至少包含1个大小写字母，数字，特殊字符'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 用户名校验 4到16位（字母，数字，下划线，减号）
export const checkUsername = (rule, value, callback) => {
  if (value) {
    var reg = /^[a-zA-Z0-9_-]{4,16}$/;
    if (reg.test(value) === false) {
      callback(new Error('4到16位（字母，数字，下划线，减号）'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

// 车牌号校验  
export const checkCarNumber = (rule, value, callback) => {
  if (value) {
    var reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
    if (reg.test(value) === false) {
      callback(new Error('车牌号格式错误'))
    } else {
      callback()
    }
  } else {
    callback()
  }
}

• 使用

<script>
import { checkCardCode } from './formValidator.js'
  export default {
    data() {
      return {
        ruleForm: {
          str: '',
        },
        rules: {
          str: [
            { required: true, message: '请输入身份证号', trigger: 'blur' }, 
            { min: 15, max: 18, message: '长度在 15 到 18 个字符', trigger: 'blur' }, 
            { required: true, trigger: 'blur', validator: checkCardCode } // 自定义正则
          ]
        }
      };
    },
  }
</script>