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