vue中的rules表單校驗規(guī)則使用方法示例詳解 :rules=“rules“
一、el-form里面必寫屬性值
:ref="dataForm" // 提交表單時進(jìn)行校驗
: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 提交表單時進(jìn)行校驗
點擊提交時，會先對表單的值進(jìn)行校驗判斷，校驗通過后，再進(jìn)行后續(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：正則表達(dá)式；
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: '',
},
}
},問題：
校驗未通過，關(guān)閉彈窗再打開還存在的問題：
this.dialogFormVisible = true
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
到此這篇關(guān)于vue中的rules表單校驗規(guī)則使用方法 :rules=“rules“的文章就介紹到這了,更多相關(guān)vue rules表單校驗規(guī)則內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue.js 中 axios 跨域訪問錯誤問題及解決方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue 的渲染器是如何對節(jié)點進(jìn)行掛載和更新的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue自定義全局組件(自定義插件)的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue在響應(yīng)頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應(yīng)頭response中獲取自定義headers操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue+tp5實現(xiàn)簡單登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
本篇文章主要介紹了vue better-scroll插件使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng) Vue.set的簡單應(yīng)用
這篇文章主要介紹了vue.js實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)，Vue.set的簡單應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue3編寫掛載DOM的插件的問題，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-07-07
antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關(guān)設(shè)置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10