elementui中rules的validator 用法

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


✅ 基本结构

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 中实现。

相关推荐
Wcowin20 分钟前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw51 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler1 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !1 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具
饺子不放糖1 小时前
基于BroadcastChannel的前端多标签页同步方案:让用户体验更一致
前端
饺子不放糖2 小时前
前端性能优化实战:从页面加载到交互响应的全链路优化
前端
Jackson__2 小时前
使用 ICE PKG 开发并发布支持多场景引用的 NPM 包
前端
饺子不放糖2 小时前
前端错误监控与异常处理:构建健壮的Web应用
前端
cos2 小时前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
饺子不放糖2 小时前
CSS的float布局,让我怀疑人生
前端