在寫vue 項目的時候遇到以下問題

1.表單校驗中，el-input前面有星號*而el-select前面無星號*,證明校驗無效，如下圖所示

相關代碼如下

<el-form-item label="電話" :label-width="formLabelWidth" prop="tel"><el-input v-model="addForm.tel" style="width: 350px"></el-input></el-form-item><el-form-item label="學院" :label-width="formLabelWidth" prop="instid"><el-select v-model="addForm.instid" placeholder="請選擇學院"><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: '請輸入電話',trigger: 'blur'}],instId: [{required: true,message: '請選擇學院',trigger: ['blur','change']}], }

問題總結：原因是el-form-item中的prop屬性值和校驗規則中的不一致導致
上面例子中一個是instid 一個是instId所以校驗無效，不顯示星號

2.el-select不像el-input校驗那樣明了，因為el-input在失去焦點的時候就會提示校驗規則而下拉框不會，如下，性別在不選的情況下沒有反應

控制臺只有兩個輸出

大家不要慌，這個不是問題，我們通過提交表單的方式來判斷是否校驗就可以了
如下圖校驗成功

3.接著問題2說，點擊立即添加按鈕之后重新選擇下拉框，校驗無效，如下圖

相關代碼如下：

<el-form-item label="性別" :label-width="formLabelWidth" prop="sex" ><template><el-select v-model="addForm.sex1" placeholder="請選擇"><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: '請選擇性別',trigger: 'blur' }],

原因1是v-model中的屬性值addForm.sex1與prop屬性值sex不一致，應該改為addForm.sex即可如下圖箭頭所示處
有些伙伴發下問題還沒有解決，因為還有一個地方會導致同樣的問題，原因2如下圖所示

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

我們可以看一下開發文檔，為什么加上change就可了

以上就是介紹下拉列表驗證無效的所有問題，喜歡的收藏

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。