el-element中form表单自定义校验规则

在el-element开发文档中，可以看到一些常见的校验规则，比如

{ required: true, message: '请输入活动名称', trigger: 'blur' }
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
{ type: 'number', message: '年龄必须为数字值'}

可是这些常规的校验，无法满足工作中一些特定需求，比如金额校验，身份证格式校验，手机号码格式校验等。 这个时候，我们就有必要进行一些额外的封装了。

以封装一个手机号码格式验证为例

// 手机电话格式正不正确
export const isPhone = (rule, data, callback) => {
  if (rule.required && !data) return callback(new Error('请输入'))
  if (data) {
    const regex = /^(1[3456789])\d{9}$/
    if (!regex.test(data)) return callback(new Error('手机号码格式不正确!'))
  }
  callback()
}

引入到form校验里面：

rules: {
  phone: [
    { required: true, message: '请输入', trigger: 'blur' },
    { validator: isPhone, trigger: 'blur' }
  ]
}

以此为例，基本可以任意实现我们在工作中需要的特殊校验了。