vue中的rules表單校驗規(guī)則使用方法示例詳解 :rules=“rules“
更新時間：2023年11月06日 09:54:25 作者：錢端攻城獅.
這篇文章主要介紹了vue中的rules表單校驗規(guī)則使用方法示例詳解 :rules=“rules“,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、el-form里面必寫屬性值
:ref="dataForm" // 提交表單時進行校驗
:rules="rules" // return 下的校驗規(guī)則
:model="userForm" // 綁定表單的值
<el-form
ref="dataForm" // 必寫屬性值
:rules="rules" // 必寫屬性值
:model="userForm" // 必寫屬性值
label-position="left"
label-width="100px"
>
<el-row>
<el-col :span="12">
<el-form-item
label="充值金額"
prop="amount" // 必寫屬性值
>
<el-input
v-model="userForm.amount" // 必寫屬性值
placeholder="請輸入充值金額"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer" align="center">
<el-button @click="dialogFormVisible = false">返回</el-button>
<el-button type="primary" @click="Recharge()" >
提交
</el-button>
</div>二、:ref 提交表單時進行校驗
點擊提交時，會先對表單的值進行校驗判斷，校驗通過后，再進行后續(xù)操作。
Recharge() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
// 校驗通過、調(diào)充值接口的邏輯操作
}
})三、:rules 校驗規(guī)則
el-form-item 里面使用 prop 屬性綁定規(guī)則
<el-form-item label="充值金額" prop="amount"> ... ... </el-form-item>
required：顯示輸入框為選填或必填項；
message：提示信息；pattern：正則表達式；
trigger：觸發(fā)事件 => 一般blur用于input、chang用于select,picker等；
data() {
return {
rules: {
amount: [
{ required: true, message: '充值金額不能為空', trigger: 'blur' },
{
pattern: /^\d+(\.\d{1,1})?$/,
message: '金額為數(shù)字類型且最多保留1位小數(shù)',
trigger: 'blur',
},
],
},
}
},四、:model 綁定表單的值
el-input 里面使用 v-model 綁定表單值
<el-input v-model="userForm.amount" ></el-input>
data() {
return {
userForm: {
amount: '',
},
}
},問題：
校驗未通過，關閉彈窗再打開還存在的問題：
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
到此這篇關于vue中的rules表單校驗規(guī)則使用方法 :rules=“rules“的文章就介紹到這了,更多相關vue rules表單校驗規(guī)則內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js是一個流行的前端JavaScript框架,用于構建用戶界面和單頁應用,這篇文章主要給大家介紹了關于VUE3常見面試題總結的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
用vue的雙向綁定簡單實現(xiàn)一個todo-list的示例代碼
本篇文章主要介紹了用vue的雙向綁定簡單實現(xiàn)一個todo的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
vue+element-ui+axios實現(xiàn)圖片上傳
這篇文章主要為大家詳細介紹了vue+element-ui+axios實現(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
本篇文章主要介紹了Vue.js 2.0 如何使用axios，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
偵聽器和計算屬性都可以用于偵聽響應式數(shù)據(jù)的變化,如果需要在數(shù)據(jù)變化后執(zhí)行操作,修改依賴項,那么就應該使用偵聽器,下面就跟隨小編一起來學習一下vue3中偵聽器的使用吧2023-09-09
這篇文章主要介紹了vue中的mescroll搜索運用及各種填坑處理，文中通過代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧2019-10-10
vue-meta實現(xiàn)router動態(tài)設置meta標簽的方法
這篇文章主要介紹了vue-meta實現(xiàn)router動態(tài)設置meta標簽,實現(xiàn)思路非常簡單內(nèi)容包括mata標簽的特點和mata標簽共有兩個屬性，分別是http-equiv屬性和name屬性，本文通過實例代碼給大家詳細講解需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vuei18n 在數(shù)組中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue 和 iView分片上傳功能實現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術,通過將文件拆分成多個小塊并逐塊上傳,解決了大文件上傳時的諸多問題,如上傳速度慢、超時和網(wǎng)絡中斷等,它還展示了如何實現(xiàn)分片上傳的進度顯示、錯誤處理和斷點續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧2025-01-01