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

elementui校验

2026-03-06 07:10:17前端教程

校验基本概念

Element UI 表单校验基于 async-validator 库实现，通过 rules 属性定义校验规则。校验触发方式包括手动触发（调用 validate 方法）和自动触发（表单字段变化时）。

表单校验规则配置

在 el-form 的 rules 属性中定义校验规则，支持必填、长度、正则、自定义校验等：

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

required: 必填校验。
min/max: 长度限制。
type: 内置类型（如 email、url）。
trigger: 触发时机（blur 或 change）。

自定义校验规则

通过 validator 函数实现复杂逻辑校验：

rules: {
  password: [
    { validator: (rule, value, callback) => {
      if (!/^(?=.*[A-Za-z])(?=.*\d).{6,}$/.test(value)) {
        callback(new Error('密码需包含字母和数字且长度≥6'));
      } else {
        callback();
      }
    }, trigger: 'blur' }
  ]
}

callback() 必须调用，参数为 Error 对象时表示校验失败。

动态校验规则

通过响应式数据动态修改规则：

data() {
  return {
    dynamicRule: { required: true, message: '动态规则必填' }
  };
},
methods: {
  updateRule() {
    this.dynamicRule = { min: 5, message: '长度需≥5' };
  }
}

表单整体校验

调用 validate 方法校验整个表单：

this.$refs.form.validate(valid => {
  if (valid) {
    console.log('校验通过');
  } else {
    console.log('校验失败');
  }
});

通过 $refs 获取表单实例。

清除校验结果

使用 clearValidate 清除单个字段或整个表单的校验状态：

this.$refs.form.clearValidate(['username']); // 清除指定字段
this.$refs.form.clearValidate();            // 清除整个表单

校验样式与反馈

错误提示通过 el-form-item 的 error 插槽自定义。
校验失败时，字段会自动添加 is-error 类名。

嵌套数据校验

对嵌套对象或数组字段使用 prop 路径语法：

rules: {
  'user.name': [{ required: true }],
  'items[0].value': [{ min: 10 }]
}

异步校验

在自定义校验函数中返回 Promise 或调用 callback 处理异步操作：

elementui校验

validator: (rule, value, callback) => {
  axios.get('/check', { params: { value } }).then(res => {
    res.valid ? callback() : callback(new Error('异步校验失败'));
  });
}

标签: elementui