Vue中Rule的使用方式
更新時(shí)間：2024年02月29日 08:44:49 作者：廣州第22號吳彥祖
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Rule的使用
日常的rule效驗(yàn)，能幫我們省很多時(shí)間去做if eles判斷
下邊記錄一下我在入職新公司的使用
1.需要效驗(yàn)的字段
要在from-item上家prop屬性 可以和字段同名
2.在data中創(chuàng)建一個rules對象
綁定當(dāng)前的from表單，并把效驗(yàn)字段的prop放置進(jìn)去
對于簡單效驗(yàn)可以直接，做非空判斷，復(fù)雜的判斷在回調(diào)函數(shù)validator中效驗(yàn)
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ù),校驗(yàn)完成就需要執(zhí)行
// 1,如果校驗(yàn)合法直接執(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.最后一步
看效驗(yàn)是否成功然后執(zhí)行成功后的操作，否則就return一個錯誤出來，使事件無法繼續(xù)執(zhí)行
代碼：
async addDeliveryCodeInfo() {
//效驗(yàn)
await this.$refs['form'].validate()
//通過后執(zhí)行,不通過,不執(zhí)行
console.log('你通過了')
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3+ts+MicroApp實(shí)戰(zhàn)教程
這篇文章主要介紹了vue3+ts+MicroApp實(shí)戰(zhàn)教程,分別在主應(yīng)用項(xiàng)目(main)和子應(yīng)用(childrenOne,childrenTwo)項(xiàng)目中安裝microApp，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
vue與iframe之間的信息交互的實(shí)現(xiàn)
這篇文章主要介紹了vue與iframe之間的信息交互的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue權(quán)限路由實(shí)現(xiàn)的方法示例總結(jié)
這篇文章主要給大家介紹了關(guān)于vue權(quán)限路由實(shí)現(xiàn)方法的相關(guān)資料，文中通過示例代碼介紹地方非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
今天小編就為大家分享一篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了利用Nuxt.js做Vuex數(shù)據(jù)持久化問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
基于Vue+ElementUI的省市區(qū)地址選擇通用組件
這篇文章主要介紹了基于Vue+ElementUI的省市區(qū)地址選擇通用組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要給大家介紹了關(guān)于如何利用Vue實(shí)現(xiàn)簡易播放器的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue實(shí)現(xiàn)文字轉(zhuǎn)語音功能詳解
這篇文章主要介紹了vue實(shí)現(xiàn)文字轉(zhuǎn)語音功能詳解的相關(guān)資料,需要的朋友可以參考下2022-09-09