vue elementUI 表單嵌套驗證的實例代碼
一：表單一級驗證
element中from組件內表單驗證通過使用el-form標簽，綁定model和rules屬性進行表單驗證
<el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent>
<el-form-item label="客戶名稱:" size="small" prop="belongId"> <el-input v-show="false" v-model="form.belongId"></el-input> <ComSelectorCustomer :value="form.customerName" @change="choice"></ComSelectorCustomer> </el-form-item>
簡單的表單驗證很簡單，在prop內綁定驗證屬性，然后在rules對象內定義驗證方法
rules: {
belongId: [{
required: true,
message: '不能為空',
trigger: 'change'
}]
}
二：模板一次循環(huán)渲染時表單驗證
<el-row v-for="(item, index) in form.warehouseList" :key="index">
<el-col :span="21">
<el-form-item label="廠庫名稱:" size="small" :prop="'warehouseList.' + index + '.factoryName'">
<el-select
v-model="item.factoryName"
clearable
filterable>
<el-option
v-for="(child, ind) in factoryList"
:key="ind"
:label="child.label"
:disabled="child.disabled"
:value="child.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
循環(huán)內模板驗證prop綁定值就是一個問題了，因為它是循環(huán)出來的沒辦法直接寫死在內，所以prop就需要動態(tài)綁定驗證屬性，這里需要注意一下，動態(tài)prop內綁定的是要和form內定義的屬性名以及model綁定的值要對應上。比如上面prop里的factoryName，form.warehouseList里子元素也要有這個屬性，select中model綁定的也應該是factoryName。因為是循環(huán)出來的，所以model綁定的就是‘item.factoryName'。
如果prop內綁定的驗證屬性名對應不上，控制臺一般都會報下面這個錯誤
三：循環(huán)嵌套循環(huán)的表單驗證
比如說是這種：
from: {
warehouseList: [{
productList: [{
productNumber: '',
productUnitPrice: ''
}]
}]
}
要是需要監(jiān)聽productList中的productNumber，并且進行驗證，這就是第三層的驗證。
<div v-for="(itemChild, itemIndex) in item.productList" :key="itemIndex">
<el-col :span="9">
<el-form-item label="客戶品名:" label-width="110px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'">
<el-input v-show="false" v-model="itemChild.productName"></el-input>
<ComSelectorProduct :value="itemChild.productName"
@change="choice"></ComSelectorProduct>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="數(shù)量:" label-width="60px" size="small" :prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productNumber'">
<el-input clearable v-model="itemChild.productNumber" placeholder="數(shù)量"></el-input>
</el-form-item>
</el-col>
</div>
prop內綁定的值需要把第一層循環(huán)時的父元素warehouseList一并寫上一直寫到input內綁定的model值
:prop="'warehouseList.' + index + '.productList.' + itemIndex + '.productName'"
驗證方法：
setRulesProduct() {
let that = this
let list1 = that.form.warehouseList
// let list2 = that.form.warehouseList.productList
if (list1 && list1.length) {
list1.forEach((item, i) => {
that.rules['warehouseList.' + i + '.factoryName'] = [{
required: true,
message: '請選擇廠庫',
trigger: 'change'
}]
that.rules['warehouseList.' + i + '.orderNumber'] = [{
required: true,
min: 1,
max: 20,
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('訂單號不能為空'))
} else if (value.length < 1 || value.length > 20) {
callback(new Error('訂單號請保持在1-20字符內'))
} else {
callback()
}
},
trigger: 'blur'
}]
that.rules['warehouseList.' + i + '.deliveryTime'] = [{
required: true,
message: '請選擇日期',
trigger: 'blur'
}]
if (item.productList && item.productList.length) {
item.productList.forEach((childItem, childIndex) => {
that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productName'] = [{
required: true,
message: '請選擇產(chǎn)品',
trigger: 'change'
}]
that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productNumber'] = [{
required: true,
min: 1,
max: 20,
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('產(chǎn)品數(shù)量不能為空'))
} else if (value.length < 1 || value.length > 20) {
callback(new Error('產(chǎn)品數(shù)量請保持在1-20字符內'))
} else {
callback()
}
},
trigger: 'blur'
}]
that.rules['warehouseList.' + i + '.productList.' + childIndex + '.productUnitPrice'] = [{
required: true,
message: '請?zhí)顚憜蝺r',
trigger: 'blur'
}]
})
}
})
}
}
在組件創(chuàng)建時調用次方法就可以了。多層嵌套驗證就搞定了，互不影響。
最重要的一點就是 循環(huán)時prop內綁定的驗證屬性名 一定要和model綁定的值相對應上，循環(huán)嵌套過多的就需要一直往上層找，找到最上層元素。
總結
以上所述是小編給大家介紹的vue + elementUI 表單嵌套驗證，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
vue中 router.beforeEach() 的用法示例代碼
導航守衛(wèi)主要是通過跳轉或取消的方式守衛(wèi)導航,本文通過示例代碼講解vue中 router.beforeEach() 的用法,感興趣的朋友跟隨小編一起看看吧2023-12-12
這篇文章主要介紹了Vue添加請求攔截器及vue-resource 攔截器使用,需要的朋友可以參考下2017-11-11
在遇到chunk-vendors.js文件的語法錯誤時,可以嘗試在vue.config.js文件中添加transpileDependencies參數(shù)進行配置,這通過明確指示哪些依賴需要被babel轉譯,從而幫助解決編譯過程中的語法問題,此方法適用于Vue項目中遇到的相關錯誤,希望能幫助到遇到同樣問題的開發(fā)者2024-10-10
Vue使用NProgress實現(xiàn)頁面頂部的進度條顯示效果
這篇文章主要介紹了vue Nprogress頁面頂部進度條功能實現(xiàn),NProgress是頁面跳轉是出現(xiàn)在瀏覽器頂部的進度條，本文通過實例代碼給大家講解，需要的朋友可以參考下2022-12-12
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)彈窗拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了Vue header組件開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Vue中watch監(jiān)聽屬性新舊值相同的問題解決方案
這篇文章主要給大家分享了Vue中watch監(jiān)聽屬性新舊值相同問題解決方案,如果有遇到相同問題的朋友,可以參考閱讀本文2023-08-08
Vue數(shù)組響應式操作及高階函數(shù)使用代碼詳解
這篇文章主要介紹了Vue數(shù)組響應式操作及高階函數(shù)使用代碼詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08