Vue中rules的寫法使用小結(jié)
更新時(shí)間：2024年01月28日 12:16:32 作者：Sun Peng
這篇文章主要介紹了Vue中rules的寫法使用小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
1、使用方法一：
template里使用=>
:rules="rules" //注意:rules不能改 ; 后面的rules要與data=>return里rules名稱相同,根據(jù)自己情況寫 ; 里面的prop也不能少; :model="ruleForm"也不能少;
data=>return里：
required:*，顯示輸入框?yàn)檫x填或必填項(xiàng)。 message:提示信息； trigger:觸發(fā)事件 => blur(用于input等)和chang(用于select,picker等)用的比較多
2、使用方法二：
<el-form-item label="貨品價(jià)格(元):" :rules="{required:true,message:'此項(xiàng)必填',trigger:blur}">
<el-input v-model="dataList.price" :disabled="showType == 'detail'" clearable />
</el-form-item>下面這種不推薦使用:
<el-form-item label="貨品價(jià)格(元):" required>
<el-input v-model="dataList.price" :disabled="showType == 'detail'" clearable />
</el-form-item>3.提交時(shí),事件（方法）顯示驗(yàn)證(必需)：
this.$refs.refForm(這里el-form是ref的內(nèi)容,根據(jù)自己情況寫).validate((valid)=>{//缺少的話,驗(yàn)證不起作用
if(vaild){
//驗(yàn)證成功...
}
})
4.遇到的不同情況:
【1】Vue實(shí)現(xiàn)EleementUI中列表的選填與必填（動(dòng)態(tài)綁定，自定義提示信息）(一個(gè)下拉框的內(nèi)容決定另一個(gè)下拉框是否為必填項(xiàng))
【2】Vue實(shí)現(xiàn)列表Table提示信息Validate重置（全部與單個(gè)）：
【3】 Element - The world's most popular Vue UI framework(自定義校驗(yàn)規(guī)則)
到此這篇關(guān)于Vue中rules的寫法使用小結(jié)的文章就介紹到這了,更多相關(guān)Vue中rules寫法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue框架可以很方便的引入各種插件,但是也因此會(huì)經(jīng)常遇到種編譯報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue前端編譯報(bào)錯(cuò)解決的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue 移動(dòng)端適配方案詳解，詳細(xì)的介紹2種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
詳解在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))
本篇文章主要介紹了在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Vue兼容ie9的問題全面解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
element?select必填項(xiàng)驗(yàn)證回顯問題的解決
本文主要介紹了element?select必填項(xiàng)驗(yàn)證回顯問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購物車功能的示例代碼
這篇文章主要介紹了使用vuex較為優(yōu)雅的實(shí)現(xiàn)一個(gè)購物車功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue實(shí)現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計(jì)
這篇文章主要為大家介紹了vue實(shí)現(xiàn)前端保持篩選條件到url并進(jìn)行同步參數(shù)設(shè)計(jì)思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了詳解Vue3?中的計(jì)算屬性及偵聽器，文章圍繞主題的相關(guān)資料展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以看下一下2022-08-08