elementui pattern

ElementUI 表单验证 Pattern 用法

ElementUI 使用 async-validator 库进行表单验证，pattern 属性可用于自定义正则表达式验证规则。

基本语法：

rules: {
  fieldName: [
    { pattern: /正则表达式/, message: '错误提示', trigger: 'blur' }
  ]
}

常见应用场景：

手机号验证

rules: {
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

邮箱验证

rules: {
  email: [
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

身份证号验证

rules: {
  idCard: [
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式有误', trigger: 'blur' }
  ]
}

自定义验证规则

可以结合 validator 实现更复杂的验证逻辑：

rules: {
  customField: [
    { 
      validator: (rule, value, callback) => {
        if (!/自定义正则/.test(value)) {
          callback(new Error('错误提示'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

注意事项：

• 正则表达式需要写在 /.../ 内
• 可以同时设置多个验证规则
• trigger 支持 'blur' 或 'change' 事件
• 复杂验证建议使用 validator 函数

动态 Pattern 规则

可以通过计算属性动态设置 pattern：

computed: {
  dynamicPattern() {
    return this.someCondition ? /正则1/ : /正则2/
  }
}

然后在 rules 中引用：

rules: {
  dynamicField: [
    { pattern: this.dynamicPattern, message: '动态验证提示' }
  ]
}