Vue中rules的寫法使用小結(jié)
更新時間：2024年01月28日 12:16:32 作者：Sun Peng
這篇文章主要介紹了Vue中rules的寫法使用小結(jié),本文給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
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如何設(shè)置定時器和清理定時器，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue實現(xiàn)圖片按比例縮放問題操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue-cli多頁面應(yīng)用實踐之實現(xiàn)組件預(yù)覽項目
在最近的項目中遇到了一個需求,找了相關(guān)資料后終于實現(xiàn),這篇文章主要給大家介紹了關(guān)于vue-cli多頁面應(yīng)用實踐之實現(xiàn)組件預(yù)覽項目的相關(guān)資料,需要的朋友可以參考下2022-05-05
Vue 項目中如何使用fullcalendar 時間段選擇插件(類似課程表格)
最近完成一個項目,需要選擇一個會議室,但是最好能夠通過在圖上顯示出該 會議室在某某時間段內(nèi)已經(jīng)被預(yù)定了,初看這個功能感覺很棘手,仔細分析下實現(xiàn)起來還是挺容易的,下面通過示例代碼講解Vue項目中使用fullcalendar時間段選擇插件,感興趣的朋友一起看看吧2024-07-07
vue表單驗證你真的會了嗎？vue表單驗證（form）validate
這篇文章主要介紹了vue表單驗證你真的會了嗎？vue表單驗證（form）validate,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-04-04
詳解如何在Vue2中實現(xiàn)useDraggable
這篇文章主要為大家詳細介紹了Vue2中實現(xiàn)useDraggable的相關(guān)知識,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的小伙伴可以參考下2023-12-12
vue-devtools是一款基于chrome游覽器的插件,用于調(diào)試vue應(yīng)用,這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue-devtools的安裝,需要的朋友可以參考下2023-08-08
使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)
這篇文章主要介紹了使用Vue Composition API寫出清晰、可擴展的表單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-06-06
vue報錯之exports is not defined問題的解決
這篇文章主要介紹了vue報錯之exports is not defined問題的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
網(wǎng)頁中滑動圖片驗證一直是各大網(wǎng)站、移動端的主流校驗方式，其主要作用是為了區(qū)分人和機器以及為了防止機器人程序暴力登錄或攻擊從而設(shè)置的一種安全保護方式，這篇文章主要介紹了vue?實現(xiàn)左滑圖片驗證,需要的朋友可以參考下2023-04-04