1、靜態(tài)生成的表單，校驗(yàn)規(guī)則是放在data中處理
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密碼" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<script>
data() {
rules: {
pass: [{
validator: validatePass,
trigger: 'blur'
}],
}
}
</script>
2、動(dòng)態(tài)表單頁面，需要把規(guī)則放在el-form-item中，進(jìn)行校驗(yàn)
<el-form :model="detail" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item v-for="(domain, index) in detail.appraisalTempContent" :label="'域名' + index" :key="index"
:prop="'appraisalTempContent.' + index + '.score'" :rules="[ { required: true, message: '分值不能為空', trigger: 'blur' },
{ pattern:/^[0-9]+([.]{1}[0-9])?$/, message: '分值為正整數(shù)或一位小數(shù)', trigger: ['blur', 'change'] }]">
<el-input v-model="domain.score"></el-input>
<el-button @click.prevent="removeDomain(domain)">刪除</el-button>
</el-form-item>
</el-form>
<script>
data() {
detail: {
appraisalTempContent: [
score: ''
],
}
}
</script>
注意事項(xiàng)：
當(dāng)使用v-for循環(huán)生成表單時(shí)，
：prop有格式要求
格式不對(duì)會(huì)報(bào)錯(cuò)
please transfer a valid prop path to form item!
:prop=“‘a(chǎn)ppraisalTempContent.’ + index + ‘.score’”文章來源：http://www.zghlxwxcb.cn/news/detail-592650.html
字段說明：
1、appraisalTempContent=遍歷數(shù)組的key，一般從后端返回的結(jié)果集中獲取
2、index =遍歷數(shù)據(jù)的下標(biāo)，定義不同的prop
3、score=實(shí)際數(shù)據(jù)的key
文章來源地址http://www.zghlxwxcb.cn/news/detail-592650.html
到了這里，關(guān)于element-ui for循環(huán)生成表單時(shí)，表單校驗(yàn)問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
