在寫(xiě)vue 項(xiàng)目的時(shí)候遇到以下問(wèn)題

1.表單校驗(yàn)中，el-input前面有星號(hào)*而el-select前面無(wú)星號(hào)*,證明校驗(yàn)無(wú)效，如下圖所示

相關(guān)代碼如下

<el-form-item label="電話(huà)" :label-width="formLabelWidth" prop="tel"><el-input v-model="addForm.tel" style="width: 350px"></el-input></el-form-item><el-form-item label="學(xué)院" :label-width="formLabelWidth" prop="instid"><el-select v-model="addForm.instid" placeholder="請(qǐng)選擇學(xué)院"><el-optionv-for="item in instArray":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item> ruleAdd:{tel: [{required: true,message: '請(qǐng)輸入電話(huà)',trigger: 'blur'}],instId: [{required: true,message: '請(qǐng)選擇學(xué)院',trigger: ['blur','change']}], }

問(wèn)題總結(jié)：原因是el-form-item中的prop屬性值和校驗(yàn)規(guī)則中的不一致導(dǎo)致
上面例子中一個(gè)是instid 一個(gè)是instId所以校驗(yàn)無(wú)效，不顯示星號(hào)

2.el-select不像el-input校驗(yàn)?zāi)菢用髁?#xff0c;因?yàn)閑l-input在失去焦點(diǎn)的時(shí)候就會(huì)提示校驗(yàn)規(guī)則而下拉框不會(huì)，如下，性別在不選的情況下沒(méi)有反應(yīng)

控制臺(tái)只有兩個(gè)輸出

大家不要慌，這個(gè)不是問(wèn)題，我們通過(guò)提交表單的方式來(lái)判斷是否校驗(yàn)就可以了
如下圖校驗(yàn)成功

3.接著問(wèn)題2說(shuō)，點(diǎn)擊立即添加按鈕之后重新選擇下拉框，校驗(yàn)無(wú)效，如下圖

相關(guān)代碼如下：

<el-form-item label="性別" :label-width="formLabelWidth" prop="sex" ><template><el-select v-model="addForm.sex1" placeholder="請(qǐng)選擇"><el-option:key="1"label="男":value="1"></el-option><el-option:key="0"label="女":value="0"></el-option></el-select></template> </el-form-item> sex: [{required: true,message: '請(qǐng)選擇性別',trigger: 'blur' }],

原因1是v-model中的屬性值addForm.sex1與prop屬性值sex不一致，應(yīng)該改為addForm.sex即可如下圖箭頭所示處
有些伙伴發(fā)下問(wèn)題還沒(méi)有解決，因?yàn)檫€有一個(gè)地方會(huì)導(dǎo)致同樣的問(wèn)題，原因2如下圖所示

將 trigger: 'blur'改為trigger: ['blur','change']即可

我們可以看一下開(kāi)發(fā)文檔，為什么加上change就可了

以上就是介紹下拉列表驗(yàn)證無(wú)效的所有問(wèn)題，喜歡的收藏

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的element ui 下拉列表验证无效的问题（通俗易懂）-实例讲解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。