elementui中rules的validator 用法

像素之间2025-08-02 16:33

在 Element UI 中，rules 的 validator 是用于自定义校验规则的核心属性，适用于复杂或非标准验证逻辑。以下是完整用法说明：

✅ 基本结构

js 复制代码

rules: {
  fieldName: [
    {
      validator: (rule, value, callback) => {
        // rule：当前规则配置
        // value：当前字段值
        // callback：验证完成后的回调
        if (/* 验证失败 */) {
          callback(new Error('错误提示信息'));
        } else {
          callback(); // 验证通过
        }
      },
      trigger: 'blur' // 触发方式
    }
  ]
}

✅ 示例：用户名长度必须大于3

js 复制代码

data() {
  const validateUser = (rule, value, callback) => {
    if (!value || value.length <= 3) {
      callback(new Error('用户名长度必须大于3'));
    } else {
      callback();
    }
  };

  return {
    form: { user: '' },
    rules: {
      user: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { validator: validateUser, trigger: 'blur' }
      ]
    }
  };
}

html 复制代码

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="用户名" prop="user">
    <el-input v-model="form.user" />
  </el-form-item>
</el-form>

✅ 表单提交时触发验证

js 复制代码

this.$refs.form.validate(valid => {
  if (valid) {
    // 验证通过
  } else {
    // 验证失败
  }
});

✅ 高级用法：动态传参（如表格行）

如果你需要在校验函数中访问外部变量（如表格行数据），可以通过函数返回规则的方式实现：

js 复制代码

validatorQty(row) {
  return [{
    validator: (rule, value, callback) => {
      if (!value && !row.otherField) {
        callback(new Error('请至少选择一项'));
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }];
}

然后在模板中：

html 复制代码

<el-form-item :rules="validatorQty(row)" prop="someField">
  <el-input v-model="row.someField" />
</el-form-item>

✅ 注意事项

callback() 必须调用，否则验证不会结束；
validator 支持异步校验（如接口校验），只需在异步完成后调用 callback()；
多个规则会按顺序执行，直到遇到第一个失败。

如需更复杂规则（如正则、联动校验、异步接口验证），都可以在 validator 中实现。