??前言：
大家好很久沒(méi)有更新文章了，本片文章主要記錄一下遇到的問(wèn)題，
使用element-ui開(kāi)發(fā)，el-form 表單驗(yàn)證，由于表單的每一項(xiàng)是后端返回動(dòng)態(tài)渲染的，之前只寫(xiě)過(guò)靜態(tài)的表單驗(yàn)證，網(wǎng)上查了一些資料和element的官方文檔最后得已解決，記錄下來(lái)分享給大家。感興趣的小伙伴可以學(xué)習(xí)一下。
??正文
1、探討需求
首先我們需要探討一下需求：
表單中的部分el-form-item 的label都是從接口拿到的，需要遍歷進(jìn)行動(dòng)態(tài)渲染。需要給每個(gè)el-form-item加上校驗(yàn)至少是必填校驗(yàn)有的el-form-item不需要校驗(yàn)，也不是從接口獲取得
2、查閱相關(guān)文檔（element官網(wǎng)）
ElementUI封裝了組件el-form來(lái)收集、校驗(yàn)和提交數(shù)據(jù)，其中的rules屬性就是用來(lái)做數(shù)據(jù)校驗(yàn)的。ElementUI提供了一些常用的表單驗(yàn)證規(guī)則，我們可以直接使用該規(guī)則來(lái)實(shí)現(xiàn)數(shù)據(jù)校驗(yàn)。rules根據(jù)rules給出的規(guī)則會(huì)對(duì)prop中的值進(jìn)行校驗(yàn)，當(dāng)不滿足要求時(shí)會(huì)彈出message相應(yīng)的提示信息。
官方動(dòng)態(tài)增減表單項(xiàng)示例
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="郵箱"
:rules="[
{ required: true, message: '請(qǐng)輸入郵箱地址', trigger: 'blur' },
{ type: 'email', message: '請(qǐng)輸入正確的郵箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能為空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">刪除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
}
}
}
</script>
我們只看自己需要的內(nèi)容：
- 可以看到在v-for 循環(huán)遍歷后的el-form-item中prop屬性綁定值是這么寫(xiě)的：
:prop = "domains.+ index + '.value'",因?yàn)槭莿?dòng)態(tài)綁定的所以需要加上冒號(hào)：。- 表單的label屬性也是通過(guò)動(dòng)態(tài)遍歷出來(lái)的
:label = "'item' + index"。- 這里的
rules單獨(dú)寫(xiě)在了表單遍歷的每一項(xiàng)上進(jìn)行校驗(yàn)。由于是動(dòng)態(tài)渲染的需要在每一項(xiàng)上都單獨(dú)綁定上校驗(yàn)規(guī)則。
3、需求完美解決
我這里后端返回的數(shù)據(jù)：
我們
el-form-item的每一項(xiàng)的label使用parameterAlias,而input中綁定的值為parameterValue。
話不多說(shuō)上代碼：
<el-form :model="form" label-width="100px" v-if="form.dataSourceConfig.length" style="margin-left: -50px;"
:rules="rules">
<el-form-item label="名稱" prop="databaseName">
<el-input v-model="form.databaseName" placeholder="請(qǐng)輸入數(shù)據(jù)源名稱" maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-form-item v-for="(item,index) in form.dataSourceConfig" :key="index"
:prop="'dataSourceConfig.'+index+'.parameterValue'" :label="item.parameterAlias"
:rules="rules[`${item.parameterName}`]">
<el-input v-model="item.parameterValue" :placeholder='"請(qǐng)輸入"+item.parameterAlias' maxlength="30"
show-word-limit></el-input>
</el-form-item>
<el-form-item label="說(shuō)明">
<el-input type="textarea" v-model="form.description" placeholder="請(qǐng)輸入說(shuō)明" maxlength="300" rows="3"
show-word-limit></el-input>
</el-form-item>
</el-form>
關(guān)鍵點(diǎn)：
:prop="'dataSourceConfig.'+ index +'.parameterValue'":label="item.parameterAlias":rules="rules[${item.parameterName}]"
定義我們需要的form表單與校驗(yàn)規(guī)則：
// 表單數(shù)據(jù)
form: {
databaseName: '',
description: '',
dataSourceConfig: []
},
rules: {
username: { required: true, message: "請(qǐng)輸入名稱", trigger: 'blur' },
ip: { required: true, message: "請(qǐng)輸入ip", trigger: 'blur' },
port: [{ required: true, message: '端口號(hào)不能為空', trigger: 'blur' },
{ type: 'number', message: '端口號(hào)必須為數(shù)字值', trigger: 'blur' }
],
db: { required: true, message: "請(qǐng)輸入庫(kù)名", trigger: 'blur' },
password: { required: true, message: "請(qǐng)輸入密碼", trigger: 'blur' },
databaseType: { required: true, message: "請(qǐng)輸入數(shù)據(jù)庫(kù)類(lèi)型", trigger: 'blur' },
databaseName: {
required: true, message: `名稱不能為空`, trigger: 'blur'
}
methods:
// 獲取參數(shù)列表
getDataSourceParams(code).then(res => {
this.form.dataSourceConfig = res.data.data;
this.loading = false
})
效果圖：
4、注意事項(xiàng)
這里說(shuō)一下表單校驗(yàn)的注意事項(xiàng)：
Form 組件提供了表單驗(yàn)證的功能，只需要通過(guò) rules 屬性傳入約定的驗(yàn)證規(guī)則，并將 Form-Item 的 prop 屬性設(shè)置為需校驗(yàn)的字段名即可。Form-Item的prop屬性需要與對(duì)應(yīng)的v-model綁定的值一致（如上案例prop屬性設(shè)置的字段名為value，input的v-model綁定值也是value），否則校驗(yàn)會(huì)不生效。el-form標(biāo)簽綁定的對(duì)象 :model="form" :rules="rules"，這里的form就是我們用到的表單那個(gè)對(duì)象，rules就是我們定義的校驗(yàn)規(guī)則。數(shù)字類(lèi)型的驗(yàn)證需要在 v-model 處加上 .number 的修飾符，這是 Vue 自身提供的用于將綁定值轉(zhuǎn)化為 number 類(lèi)型的修飾符。例如：v-model.number="form.phone"
??專(zhuān)欄分享：
小程序項(xiàng)目實(shí)戰(zhàn)專(zhuān)欄：《uniapp小程序開(kāi)發(fā)》
前端面試專(zhuān)欄地址：《面試必看》文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-620870.html
? 名言警句：說(shuō)能做的，做說(shuō)過(guò)的 \textcolor{red} {名言警句：說(shuō)能做的，做說(shuō)過(guò)的} 名言警句：說(shuō)能做的，做說(shuō)過(guò)的
? 原創(chuàng)不易，還希望各位大佬支持一下 \textcolor{blue}{原創(chuàng)不易，還希望各位大佬支持一下} 原創(chuàng)不易，還希望各位大佬支持一下
?? 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！ \textcolor{green}{點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！} 點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動(dòng)力！
?? 收藏，你的青睞是我努力的方向！ \textcolor{green}{收藏，你的青睞是我努力的方向！} 收藏，你的青睞是我努力的方向！
?? 評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！ \textcolor{green}{評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！} 評(píng)論，你的意見(jiàn)是我進(jìn)步的財(cái)富！
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-620870.html
到了這里，關(guān)于ElementUI 實(shí)現(xiàn)動(dòng)態(tài)表單數(shù)據(jù)校驗(yàn)（已解決）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
