element表單使用校驗之校驗失效問題詳解
首先是html必須正確,直接看代碼示例:
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form-item label="名稱" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="性別" prop="sex"> <el-input v-model="form.sex"></el-input> </el-form-item> <el-form-item label="年齡" prop="age"> <el-input v-model="form.age"></el-input> </el-form-item> </el-form>
第一種可能的錯誤: 字段錯誤
其中的每個 el-form-item 標(biāo)簽中,都有一個 prop ,其中的值是我們 rules 對象中的 某個 屬性。
然后我們 v-model 綁定的值也必須是 這個 屬性
比如我們的字段是 userName,我們的prop還是name時,校驗失效
<el-form-item label="名稱" prop="name"> <el-input v-model="form.userName"></el-input> </el-form-item>
再來看js中的代碼:
form: { name: undefined, sex: undefined, age: undefined }, rules: { name: [ { required: true, message: "用戶名稱不能為空", trigger: "blur" }, { min: 2, max: 20, message: '用戶名稱長度必須介于 2 和 20 之間', trigger: 'blur' } ], sex: [ { required: true, message: "性別不能為空", trigger: "blur" } ], age: [ { required: true, message: "年齡不能為空", trigger: "blur" }, { pattern: /^([0-9]|[1-9]\d|[1-9]\d\d)$/, message: '年齡介于 0-999 之間', trigger: 'blur' } ] }
第二種:觸發(fā)校驗錯誤
rules 中 每個校驗對象 都有一項 trigger 是檢驗觸發(fā)的方式
對 el-input
輸入框的驗證,trigger
的值選blur
,即失去焦點時進行驗證。
下拉框 el-select
、日期選擇器 el-date-picker
、復(fù)選框 el-checkbox
、單選框 el-radio
驗證時,trigger
的值選擇change
,即當(dāng)值發(fā)生變化時就進行驗證。
沒有任何輸入的時候,不會觸發(fā) change , 但一定會觸發(fā) blur 事件
注:如果使用了其他的組件(非ele組件等),組件中沒有 v-model 等等情況時,值改變時需要我們手動去觸發(fā)校驗
方法名 | 說明 | 參數(shù) |
validateField | 對部分表單字段進行校驗的方法 | Function(props: array | string, callback: Function(errorMessage: string)) |
this.$refs.表單ref名稱.validateField(校驗字段);
validator
最后提一下自定義校驗,用于一些校驗一些復(fù)雜的值
validator的參數(shù)有:(rule, value, callback),前三個比較重要。
- rule:指向該條規(guī)則對象。
- value:新的值,用于參與運算、對比。
- callback:執(zhí)行回調(diào),使用方法是:callback('...');。
- 如果不傳參:表示驗證通過,一般不必專門強調(diào)。
- 如果傳入值:字符串會作為錯誤提示,但是顯示優(yōu)先級低于外層的message。比如callback('內(nèi)層錯誤提示');跟message: '外層錯誤提示'同時存在,則會提示:外層錯誤提示。
直接看代碼
data(){ const name = (rule, value, callback) => { console.log(rule) console.log(value) console.log(callback) if (this.oldName === value) { callback(new Error("新名字不能和舊名字一致")); } else { callback(); } }; return { rules: { name: [ { required: true, trigger: "blur", message: "請再次輸入新名字" }, { required: true, validator: name, trigger: "blur" } ] } }
更多的參數(shù)和核心代碼 可以查看 ele 實現(xiàn)校驗使用的 async-validator
總結(jié)
到此這篇關(guān)于element表單使用校驗之校驗失效問題的文章就介紹到這了,更多相關(guān)element表單校驗失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue如何實現(xiàn)文件預(yù)覽和下載功能的前端上傳組件
在Vue.js項目中,使用ElementUI的el-upload組件可以輕松實現(xiàn)文件上傳功能,通過配置組件參數(shù)和實現(xiàn)相應(yīng)的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09解決vue中無法動態(tài)修改jqgrid組件 url地址的問題
下面小編就為大家分享一篇解決vue中無法動態(tài)修改jqgrid組件 url地址的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-0315 分鐘掌握vue-next函數(shù)式api(小結(jié))
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結(jié)),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue3在table里使用elementUI的form表單驗證的示例代碼
這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12Vue如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01移動端Vue2.x Picker的全局調(diào)用實現(xiàn)
這篇文章主要介紹了移動端Vue2.x Picker的全局調(diào)用實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03