element ui -- 带自定义验证的表单 this.$refs[formName].validate()里面的内容不执行

最新推荐文章于 2024-04-09 18:40:00 发布

liushan633

最新推荐文章于 2024-04-09 18:40:00 发布

阅读量2.6k

点赞数

分类专栏：笔记文章标签： element-ui 验证

本文链接：https://blog.youkuaiyun.com/liushan633/article/details/84943813

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Element UI中遇到的自定义表单验证问题，特别是针对后端传递的数字参数需要根据min和max进行大小验证的情况。由于Element UI的内置验证规则不支持直接传参，作者通过编写自定义验证函数实现了这一需求。然而，在使用`this.$refs[formName].validate()`时发现验证内容未执行。经过排查，作者发现所有自定义验证的if条件必须闭环，即每个if必须有else，修复这个问题后，验证功能正常工作。

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

项目需要自定义验证，需要验证的参数都是后端传过来的，

如果传过来的是数字，就要根据后端返回的min和max验证数字大小，但是element ui没有验证数字大小的方法，但是可以自定义验证规则（官网给的自定义验证方法不能传参），所以有了下面的方法

rules.push({
    validator: (rule, value, callback) => {
      if(min && max){
        if (value > max || value < min){
          return callback(new Error(`输入数值必须在${min}到${max}之间`))
        }
      }else if(max && value > max){
        return callback(new Error(`输入数值必须小于${max}`))
      }else if(min && value < min){
        return callback(new Error(`输入数值必须大于${min}`))
      }
    }
  })

上面这个方法，单个验证规则没问题，但是this.$refs[formName].validate()里面的内容怎么都不执行，
后来

发现！自定义验证的所有if都得闭环也就是，所有的if都得有else

validator: (rule, value, callback) => {
    if(min && max){
      if (value > max || value < min){
        return callback(new Error(`输入数值必须在${min}到${max}之间`))
      }else {
        return callback()
      }
    }else if(max && value > max){
      return callback(new Error(`输入数值必须小于${max}`))
    }else if(min && value < min){
      return callback(new Error(`输入数值必须大于${min}`))
    }else {
      return callback()
    }
  }

这样就没问题~