elementui validator

ElementUI 表单验证使用指南

ElementUI 提供了强大的表单验证功能，基于 async-validator 库实现。以下为常见用法和注意事项：

基本验证规则配置

在 el-form 的 rules 属性中定义验证规则：

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{6,12}$/, message: '6-12位字母数字组合' }
  ]
}

常用验证规则类型

• required: 必填字段
• min/max: 最小/最大长度（字符串或数组）
• type: 可设置为 email、date 等格式
• pattern: 正则表达式验证
• validator: 自定义验证函数

自定义验证函数

const validateAge = (rule, value, callback) => {
  if (!value) return callback(new Error('年龄不能为空'))
  if (!Number.isInteger(value)) {
    callback(new Error('必须为数字值'))
  } else {
    if (value < 18) callback(new Error('必须年满18岁'))
    else callback()
  }
}

rules: {
  age: [{ validator: validateAge, trigger: 'blur' }]
}

动态验证规则

可通过计算属性动态修改规则：

computed: {
  dynamicRules() {
    return {
      email: [
        { required: true, message: '邮箱必填' },
        { type: 'email', message: '格式不正确' }
      ],
      // 其他动态规则...
    }
  }
}

表单验证方法

通过 ref 调用表单验证方法：

// 验证整个表单
this.$refs.form.validate(valid => {
  if (valid) {
    // 提交逻辑
  }
})

// 验证单个字段
this.$refs.form.validateField('username')

清除验证结果

// 重置表单并清除验证
this.$refs.form.resetFields()

// 清除特定字段验证
this.$refs.form.clearValidate(['username'])

注意事项

• 表单元素必须设置 prop 属性，且与 rules 的键名一致
• 异步验证需在自定义验证函数中正确处理回调
• 动态修改表单数据后可能需要手动调用 clearValidate
• 嵌套表单需确保 prop 使用正确的路径格式（如 user.name）

以上方法覆盖了 ElementUI 表单验证的主要使用场景，可根据实际需求组合使用。