部分代碼

問(wèn)題復(fù)現(xiàn)

我這個(gè)頁(yè)面有三個(gè)類(lèi)型，當(dāng)我使用element的表單驗(yàn)證時(shí)，前兩個(gè)類(lèi)型可以順利通過(guò)驗(yàn)證，并跑到下一步，當(dāng)我點(diǎn)第三種類(lèi)型的時(shí)候，一直卡在驗(yàn)證那里，打印也不出來(lái)，也不報(bào)錯(cuò)，必填項(xiàng)已經(jīng)全部填上，但就是沒(méi)有回調(diào)，后來(lái)百度了一下，發(fā)現(xiàn)了問(wèn)題，因?yàn)檫@個(gè)類(lèi)型里面有一個(gè)input框使用了自定義規(guī)則，而且?。。](méi)有將該規(guī)則callback()，就會(huì)導(dǎo)致出現(xiàn)沒(méi)有回調(diào)的情況

//自定義規(guī)則
      var validatePass = (rule, value, callback) => {
        if(value <= 0 || value > 0.99)
        {
          callback(new Error('請(qǐng)輸入大于0且小于1的數(shù)字'));
        }
        // else {  //這是被我忽視的代碼，導(dǎo)致后面沒(méi)有回調(diào)
        //   callback();
        // }
      };

上面代碼就是事發(fā)現(xiàn)場(chǎng)的代碼，需要加上callback才可正常使用

參考文檔：百度網(wǎng)友：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官方文檔：（搜自定義校驗(yàn)規(guī)則） https://element.eleme.cn/#/zh-CN/component/form

image.png

既然來(lái)都來(lái)了，順便說(shuō)一下動(dòng)態(tài)添加表單檢驗(yàn)

很多時(shí)候我們會(huì)動(dòng)態(tài)的添加一些循環(huán)的表單，而且里面的數(shù)據(jù)又是必填的，這個(gè)時(shí)候就需要用到動(dòng)態(tài)表單檢驗(yàn)

示例

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

image.png

表單內(nèi)添加規(guī)則

重點(diǎn)需要注意這里

image.png

需要包裹兩層引號(hào)，且不需要添加form名稱(chēng)，后面的字段名必須等于輸入框的字段，通過(guò)index定義好每一個(gè)的值