element 表单规则校验没有回调问题

部分代码

问题复现

我这个页面有三个类型，当我使用element的表单验证时，前两个类型可以顺利通过验证，并跑到下一步，当我点第三种类型的时候，一直卡在验证那里，打印也不出来，也不报错，必填项已经全部填上，但就是没有回调，后来百度了一下，发现了问题，因为这个类型里面有一个input框使用了自定义规则，而且！！！没有将该规则callback()，就会导致出现没有回调的情况

//自定义规则
      var validatePass = (rule, value, callback) => {
        if(value <= 0 || value > 0.99)
        {
          callback(new Error('请输入大于0且小于1的数字'));
        }
        // else {  //这是被我忽视的代码，导致后面没有回调
        //   callback();
        // }
      };

上面代码就是事发现场的代码，需要加上callback才可正常使用

参考文档：百度网友：https://blog.csdn.net/weixin_40119256/article/details/105635871?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

element官方文档：（搜自定义校验规则） https://element.eleme.cn/#/zh-CN/component/form

image.png

既然来都来了，顺便说一下动态添加表单检验

很多时候我们会动态的添加一些循环的表单，而且里面的数据又是必填的，这个时候就需要用到动态表单检验

示例

<div v-for="(item,index) in form.list" :key="index">
 <el-form-item label="预算" :rules="rules.commonNumber" :prop='"list["+index+"].budget"'>
                   <el-input
                      v-model="item.budget"
                    ></el-input>
              </el-form-item>
</div>

image.png

表单内添加规则

重点需要注意这里

image.png

需要包裹两层引号，且不需要添加form名称，后面的字段名必须等于输入框的字段，通过index定义好每一个的值