elementui正则

ElementUI 表单验证中使用正则表达式

ElementUI 的表单验证机制支持通过正则表达式进行自定义校验。以下为常见实现方式：

定义正则规则

在 rules 对象中通过 pattern 属性直接指定正则表达式：

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

结合 validator 自定义校验

若需更复杂的逻辑，可在 validator 函数中使用正则：

rules: {
  password: [
    {
      validator: (rule, value, callback) => {
        const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\w\W]{6,}$/;
        if (!reg.test(value)) {
          callback(new Error('需包含大小写字母和数字，长度≥6'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
}

常用正则示例

1. 邮箱校验

   /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

2. 身份证号

   

   /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/

3. 中文姓名

   /^[\u4e00-\u9fa5]{2,4}$/

动态正则规则

通过变量传递正则表达式：

data() {
  const dynamicReg = new RegExp('^\\d{' + this.codeLength + '}$');
  return {
    rules: {
      code: [{ pattern: dynamicReg, message: '长度不符' }]
    }
  };
}

注意事项

• 正则表达式需用 /.../ 包裹或通过 new RegExp() 构造。
• 表单验证失败时，message 属性会显示错误提示。
• 测试正则时建议使用工具如 Regex101 验证准确性。