Element Plus中，表单校验的`rules`语法格式

在Element Plus中，表单校验的rules属性是一个对象，其中每个键对应表单中的一个字段，值是一个包含校验规则的数组。以下是rules的语法格式：

基本语法

const rules = reactive<FormRules>({
  field1: [
    { rule1 },
    { rule2 }
  ],
  field2: [
    { rule1 },
    { rule2 }
  ],
  // 更多字段...
});

校验规则对象的属性

每个校验规则对象可以包含以下属性：

属性	类型	描述
required	boolean	是否必填。如果为true，则字段不能为空。
message	string	校验失败时显示的错误消息。
trigger	string	触发校验的事件，可以是blur（失去焦点时）、change（值改变时）或submit（表单提交时）。
min	number	字符串或数组的最小长度。
max	number	字符串或数组的最大长度。
len	number	字符串或数组的精确长度。
pattern	RegExp	用于正则表达式校验的模式。
type	string	校验类型，如string、number、boolean、date等。
enum	Array	允许的值列表。
whitespace	boolean	如果为true，则字段不能只包含空白字符。
validator	Function	自定义校验函数。函数签名：(rule, value, callback) => void。

示例代码

1. 基本校验规则

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ]
});

2. 自定义校验规则

const rules = reactive<FormRules>({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应为6到20个字符', trigger: 'blur' },
    { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/, message: '密码必须包含大写字母、小写字母和数字', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: (rule, value, callback) => {
      if (value !== form.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
});

3. 动态校验规则

const rules = reactive<FormRules>({
  title: [
    {
      validator: (rule, value, callback) => {
        const subtitle = form.subtitle;
        const maxLength = subtitle ? 16 : 32;
        const length = calculateLength(value);

        if (length > maxLength) {
          callback(new Error(`标题不能超过 ${maxLength} 个字符`));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },
  ],
});

4. 使用正则表达式校验

const rules = reactive<FormRules>({
  phone: [
    { pattern: /^[1-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  idCard: [
    {
      pattern: /^(?:\d{15}|\d{18}|\d{17}X)$/,
      message: '请输入有效的身份证号',
      trigger: 'blur'
    }
  ]
});

5. 使用type属性校验

const rules = reactive<FormRules>({
  number: [
    { type: 'number', message: '请输入数字', trigger: 'blur' }
  ],
  url: [
    {
      type: 'url',
      message: '请输入有效的URL地址',
      trigger: 'blur'
    }
  ]
});

6. 使用whitespace属性校验

const rules = reactive<FormRules>({
  name: [
    { required: true, whitespace: true, message: '不能为空或空格', trigger: 'blur' }
  ]
});

7. 使用enum属性校验

const rules = reactive<FormRules>({
  gender: [
    { enum: ['male', 'female'], message: '请选择性别', trigger: 'change' }
  ]
});

8. 使用len属性校验

const rules = reactive<FormRules>({
  username: [
    { len: 5, message: '用户名必须为5个字符', trigger: 'blur' }
  ]
});

9. 使用trigger属性校验

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位字符', trigger: 'change' }
  ]
});

10. 使用message属性校验

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '用户名不能为空', trigger: 'blur' }
  ]
});

11. 使用pattern属性校验

const rules = reactive<FormRules>({
  username: [
    {
      pattern: /^[a-zA-Z0-9_]+$/,
      message: '用户名只能包含字母、数字和下划线',
      trigger: 'blur'
    }
  ]
});

12. 使用validator属性校验

const rules = reactive<FormRules>({
  customField: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('字段不能为空'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

总结

Element Plus的表单校验rules属性是一个灵活的工具，可以满足各种复杂的校验需求。通过组合使用内置规则和自定义校验函数，可以轻松实现复杂的表单验证逻辑。