el-form 自定义校验规则失效之坑 elementUI

最新推荐文章于 2025-04-01 11:03:07 发布

不怕不管

最新推荐文章于 2025-04-01 11:03:07 发布

阅读量4k

点赞数 3

分类专栏： element UI 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45654407/article/details/108006178

版权

element UI 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在使用ElementUI进行自定义表单验证时，为何必须调用回调函数callback。作者指出，漏调callback会导致校验无法触发，阻碍表单提交。通过错误和正确的代码示例，强调了在if判断中务必包含else来确保callback始终被调用，以保持验证流程的正常进行。同时提供了一个简洁的正则表达式校验整数的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element el-form自定义校验
elementUI 说明了自定义校验 callback 必须被调用！
可我写着写着就漏了，如果你发现校验没有触发，也进不了校验，很可能就是没有调用callback。
有if判断都要加上else把调用callback，不然如果没进入if判断，就没法把callback调用了，同时也无法继续提交了。
callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否则validate会一直去等待callback的返回。

this.$refs.ruleForm.validate((valid) => {
这里都进不来
  if (valid) {
}

错误示范：

    var validUseBalance = (rule, value, callback) => {
      if (Number(this.ruleForm.useBalance) != 0 || Number(this.maxUseBalance) != 0) {
        if (Number(this.ruleForm.useBalance) > Number(this.maxUseBalance)) {
          callback(new Error('useBalance不可大于maxUseBalance'))
        }
        //错误代码
       callback()
      }
    }

正确示范:

    var validUseBalance = (rule, value, callback) => {
      if (Number(this.ruleForm.useBalance) != 0 || Number(this.maxUseBalance) != 0) {
        if (Number(this.ruleForm.useBalance) > Number(this.maxUseBalance)) {
          callback(new Error('useBalance不可大于maxUseBalance'))
        }
      } else {
        callback()
      }
    }

更简约的写法

/** 校验输入内容是否为正整数 */
const checkZhengShu = (rule, value, callback) => {
  let reg = new RegExp(/^[1-9]\d*$/);
  if (!value) return callback(new Error("请填入数值"));
  if (!reg.test(value))
    return callback(new Error("数值为整数，不可有小数点或特殊符号"));
  callback();
};