Form 組件提供了表單驗(yàn)證的功能筐赔，只需要通過 rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可达皿。
正常情況下的表單驗(yàn)證寫法
<template>
<div class="user-detail-body">
<el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="150px" :rules="rules">
<el-form-item label="員工姓名" prop="empName">
<el-input clearable v-model="ruleForm.empName" size="small" placeholder="請(qǐng)輸入" maxlength="20"></el-input>
</el-form-item>
<el-form-item label="所屬組織部門" prop="deptName">
<el-input v-model="ruleForm.deptName" size="small" placeholder="請(qǐng)選擇">
<i slot="suffix" class="el-input__icon el-icon-search" @click="openDepartmentSelect"></I>
</el-input>
</el-form-item>
<el-form-item label="員工手機(jī)號(hào)碼" prop="mobileNo">
<el-input clearable v-model="ruleForm.mobileNo" size="small" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
<el-form-item label="證件類型" prop="certificateType">
<el-select placeholder="請(qǐng)選擇" size="small" filterable prop="certificateType" v-model="ruleForm.certificateType">
<el-option label="身份證" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="性別" prop="gender">
<el-radio-group v-model="ruleForm.gender">
<el-radio :label="1">男</el-radio>
<el-radio :label="2">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="入職日期" prop="entryDate">
<el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.entryDate" size="small" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
data() {
return {
ruleForm: {
empName: '', //員工姓名
deptName: '', //部門名
mobileNo: '', //手機(jī)號(hào)碼
certificateType: '', //證件類型
gender: '', //性別
entryDate: '', //入職時(shí)間
},
rules: {
empName: [
{required: true, message: '請(qǐng)輸入員工姓名', trigger: 'blur'},
],
mobileNo: [
{required: true, message: '請(qǐng)輸入11位手機(jī)號(hào)', trigger: 'blur'},
{max: 11, message: '請(qǐng)輸入11位手機(jī)號(hào)'},
{
validator(rule, value, callback) {
(/^[1][0-9]{10}$/g).test(value) ? callback() : callback(new Error("請(qǐng)輸入正確手機(jī)號(hào)"))
},
trigger: 'blur'
}
],
gender: [
{required: true, message: '請(qǐng)輸入選擇性別', trigger: 'change'},
]
}
};
},
但是龄寞，有可能我們的需求是這樣的汤功，如圖：
商城和系統(tǒng)管理是從后臺(tái)接口返回的滔金，隨著開通業(yè)務(wù)的增多，業(yè)務(wù)模塊還會(huì)返回更多科阎。那么如果表單項(xiàng)里有通過 v-for 動(dòng)態(tài)生成的表單項(xiàng)忿族，該如何驗(yàn)證呢？
先附上循環(huán)表單項(xiàng)沒有加驗(yàn)證之前的代碼：
<div>已開通的業(yè)務(wù)：</div>
<div v-for="(item, index) in ruleForm.businessList" :key="item.serviceId">
<el-row>
<el-col :span="5">
<span class="opening-app">{{item.serviceName}}</span>
</el-col>
<el-col :span="19">
<el-form-item label="渠道商戶號(hào)" label-width="100px">
<el-input v-model="item.userMercCode" clearable size="small" placeholder="請(qǐng)輸入渠道商戶號(hào)"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
首先是添加rules規(guī)則错英，這個(gè)和正常添加規(guī)則一樣
data() {
return {
ruleForm: {
businessList: [{"serviceId":null, "serviceName":"", "userMercCode":""}]
},
rules: {
userMercCode: [
{required: true, message: '請(qǐng)輸入渠道商戶號(hào)', trigger: 'blur'},
]
}
};
}
然后給表單項(xiàng)添加驗(yàn)證
<el-form-item label="渠道商戶號(hào)" :prop="'businessList.'+index+'.userMercCode'" :rules="rules.userMercCode" label-width="100px">
<el-input v-model="item.userMercCode" clearable size="small" placeholder="請(qǐng)輸入渠道商戶號(hào)"></el-input>
</el-form-item>
注意事項(xiàng)
:rules
原來的寫法是直接在外層<el-form :rules="rules">標(biāo)簽上設(shè)置一個(gè)總的 :rules 就可以了 椭岩，現(xiàn)在是不僅需要設(shè)置總的 :rules 噪伊，還需要給 v-for 循環(huán)里的標(biāo)簽單獨(dú)設(shè)置 :rules 氮唯，<el-form-item :rules="rules.userMercCode">。注意要用 rules.userMercCode豆励。:prop
另外主要就是 :prop 了瞒渠，注意正常驗(yàn)證表單項(xiàng)是 prop，而這里是 :prop嫩痰。
:prop="'businessList.'+index+'.userMercCode'"是拼接的形式窍箍，前面是 v-for 綁定的數(shù)組丽旅，中間是數(shù)組索引 index纺棺，最后是表單項(xiàng)綁定的 v-model 的名稱祷蝌，然后用點(diǎn) . 把它們連接起來。這三項(xiàng)都必須保證正確米丘，錯(cuò)一個(gè)都無(wú)法驗(yàn)證糊啡。ruleForm
最后就是要注意，v-for 綁定的數(shù)組也必須綁定在 form 對(duì)象里靶累，注意上面的 data 里：
ruleForm: {
businessList: [{"serviceId":null, "serviceName":"", "userMercCode":""}]
},
