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

elementui rule

2026-03-06 03:57:16前端教程

ElementUI 表单验证规则（Rule）详解

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: 正则表达式验证。
trigger: 触发时机（blur 或 change）。

自定义验证规则

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

elementui rule

rules: {
  age: [
    { validator: (rule, value, callback) => {
      if (!value) {
        callback(new Error('年龄不能为空'));
      } else if (!Number.isInteger(value)) {
        callback(new Error('必须为数字'));
      } else if (value < 18) {
        callback(new Error('年龄必须大于18岁'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
}

自定义函数接收 rule、value 和 callback 参数。
验证失败时调用 callback(new Error('提示信息'))，成功时直接调用 callback()。

动态规则

可以通过计算属性或方法动态生成规则：

computed: {
  dynamicRules() {
    return {
      email: [
        { required: true, message: '邮箱不能为空', trigger: 'blur' },
        { type: 'email', message: '格式不正确', trigger: 'blur' }
      ]
    };
  }
}

异步验证

结合 Promise 或 async/await 实现异步验证：

elementui rule

rules: {
  username: [
    { validator: async (rule, value) => {
      const res = await checkUserExists(value);
      if (res.exists) {
        throw new Error('用户名已存在');
      }
    }, trigger: 'blur' }
  ]
}