记录：elementUI中validateField对部分表单字段进行校验数组时多次回调问题

最新推荐文章于 2025-09-08 16:58:05 发布

原创最新推荐文章于 2025-09-08 16:58:05 发布 · 4.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

elementUI

2 篇文章

订阅专栏

本文介绍了一种在前端表单验证中使用validateField方法进行部分校验的有效策略。通过将验证消息存储到数组中并利用every方法判断所有验证是否通过的方式，实现了灵活且高效的表单验证流程。

我喜欢直入主题：

首先要知道，使用validateField部分校验数组的时候，数组有几位，就会回调几次。当回调返回都为“ ”，也就是空的时候，表示验证通过。当返回任何一个不为空的时候，就是不通过，这个不为空的回调内容就是我们校验时写的文字。比如下面这样callback内的文字


    const validateBangCha = (rule,value,callback)=>{
      let val = this.ruleForm.allowablePoundDifference+'';
      if (isNaN(val)) {
        callback(new Error('请输入数字'))
      } else if((value < 0 || value >=1000)
      || (val.indexOf(".") != -1 && val.split('.').length > 2)
      || (val.indexOf(".") != -1 && val.split('.')[1].length > 3)){
        callback(new Error('请正确输入0~999.999的数字'))
      }else{
        callback();
      }
    };

所以，只要明白上面的思想。就很好解决了，而且方法有很多。

我解决方法就是：

1. 定义一个空数组，校验的时候，把每个值 push进去

2.然后用every去判断，当全部为空的时候，那就是可用执行我们下面的业务操作。

let validateList = [];
 this.$refs['ruleForm'].validateField(['gasAmount','transportValue','waybillId'],(message) => {
    validateList.push(message)
 });
 if (validateList.every((item) => item === '')) {
     // 咱们的操作
 }