Vue中Rule的使用方式
Rule的使用
日常的rule效驗,能幫我們省很多時間去做if eles判斷
下邊記錄一下我在入職新公司的使用
1.需要效驗的字段
要在from-item上家prop屬性 可以和字段同名
2.在data中創(chuàng)建一個rules對象
綁定當(dāng)前的from表單,并把效驗字段的prop放置進去
對于簡單效驗可以直接,做非空判斷,復(fù)雜的判斷在回調(diào)函數(shù)validator中效驗
baseRules:{ materialsName: [{required: true, message: "請輸入物料名稱", trigger: "blur"}], deliveryScope: [{required: true, message: "請輸入物料名稱", trigger: "blur"}], offect: [{required: true, message: "請輸入用途", trigger: "blur"}], materialsContent: [{validator: (rule, value, callback) => { // rule:當(dāng)前標(biāo)準(zhǔn) //value:當(dāng)前輸入框的值 也常常是用值做判斷 // callback:Element傳入的固定回調(diào)函數(shù),校驗完成就需要執(zhí)行 // 1,如果校驗合法直接執(zhí)行,沒有參數(shù) // 2.如果不合法,創(chuàng)建一個錯誤對象參數(shù)new Error if (!value) { callback(new Error('請選擇物料內(nèi)容')) } else { let result = JSON.parse(value) if(result && result.link) { callback() }else { callback(new Error('請選擇物料內(nèi)容')) } } }, trigger: "change"}], }
3.最后一步
看效驗是否成功然后執(zhí)行成功后的操作,否則就return一個錯誤出來,使事件無法繼續(xù)執(zhí)行
代碼:
async addDeliveryCodeInfo() { //效驗 await this.$refs['form'].validate() //通過后執(zhí)行,不通過,不執(zhí)行 console.log('你通過了') }
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法分析
這篇文章主要介紹了vue實現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法,結(jié)合實例形式分析了vue.js針對導(dǎo)航隱藏與顯示的路由配置、事件監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02vue-mugen-scroll組件實現(xiàn)pc端滾動刷新
這篇文章主要為大家詳細介紹了vue-mugen-scroll組件實現(xiàn)pc端滾動刷新,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08vue2 設(shè)置router-view默認路徑的實例
今天小編就為大家分享一篇vue2 設(shè)置router-view默認路徑的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無法點擊下一年和下一月問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue3配置路由ERROR in [eslint]報錯問題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10