1.form表單中
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
label="郵箱"
prop="email"
: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-form-item>
</el-form>
2.data中文章來源:http://www.zghlxwxcb.cn/news/detail-716608.html
dynamicValidateForm: {
domains: [{
value: ''
},
{
value: ''
},
{
value: ''
},
{
value: ''
}
],
email: ''
}
3.提交前觸發(fā)校驗(yàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-716608.html
this.$refs["dynamicValidateForm"].validate();
到了這里,關(guān)于vue el-form-item :rules動(dòng)態(tài)校驗(yàn)實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!