1、静态生成的表单,校验规则是放在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、动态表单页面,需要把规则放在el-form-item中,进行校验
<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: '分值为正整数或一位小数', 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>
注意事项:
当使用v-for循环生成表单时,
:prop有格式要求
格式不对会报错
please transfer a valid prop path to form item!
:prop=“‘appraisalTempContent.’ + index + ‘.score’”文章来源:https://www.toymoban.com/news/detail-592650.html
字段说明:
1、appraisalTempContent=遍历数组的key,一般从后端返回的结果集中获取2、index =遍历数据的下标,定义不同的prop
3、score=实际数据的key文章来源地址https://www.toymoban.com/news/detail-592650.html
到了这里,关于element-ui for循环生成表单时,表单校验问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!