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