当前位置：首页 > 前端教程

elementui rules

2026-03-06 01:33:29前端教程

ElementUI 表单验证规则 (rules)

ElementUI 提供了强大的表单验证功能，通过 rules 属性可以定义各种验证规则。以下是常见用法和示例：

基本规则定义

在表单的 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: 最小/最大长度（字符串或数组）
pattern: 正则表达式验证
validator: 自定义验证函数
type: 内置类型验证（email/date等）

email: [
  { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
],
age: [
  { type: 'number', min: 18, max: 99, message: '年龄需在18-99之间' }
]

自定义验证函数

通过 validator 可以实现复杂验证逻辑：

checkPassword: [
  { validator: (rule, value, callback) => {
    if (value !== this.formData.password) {
      callback(new Error('两次输入密码不一致'))
    } else {
      callback()
    }
  }, trigger: 'blur' }
]

动态验证规则

可以根据条件动态修改验证规则：

watch: {
  'formData.type'(val) {
    this.rules.amount[0].required = val === '2'
    this.$refs.form.clearValidate('amount')
  }
}

表单验证方法

validate: 验证整个表单
validateField: 验证特定字段
clearValidate: 清除验证结果

this.$refs.form.validate(valid => {
  if (valid) {
    // 提交表单
  }
})

异步验证示例

结合Promise实现异步验证：

elementui rules

asyncCheck: [
  { validator: (rule, value, callback) => {
    api.checkValue(value).then(res => {
      res.valid ? callback() : callback(new Error('验证失败'))
    })
  }, trigger: 'blur' }
]