ElementUI Form表单里使用 v-for循环创建表单元素校验
1、表单的主数据是要写成对象形式 :model="ruleForm"
不过既然是要动态的,肯定是要循环呢,所以可以写成这样:
data() {
return {
ruleForm:{
title: "",
checkGruopList: [{
name: "",
phone: "",
idCard:"",
}]
},
}
}
-
因为是循环的,所以prop也要变成动态的了,要拼接上
index
,就变成根据索引去找对应的校验项了,即为:prop="'checkGruopList.' + index + '.name'"
,这样的话,就变成了:prop="checkGruopList.0.name"
、prop="checkGruopList.1.name"
、prop="checkGruopList.2.name"
… 这样的话,就可以照顾到每一项中的每一个绑定的值了,校验就不会漏掉 -
最重要的是
el-form-item
标签里面一定要加校验规则:rules="rules.name"
,否则页面上不会触发校验,并且必填的星号也不会出现
2、校验规则写成内联就可以触发校验函数 this.$refs["ruleForm"].validate((val) => {})
了
<template>
<el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="ruleForm">
<el-row :span="24">
<el-col :span="8">
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row v-for="(item, index) in ruleForm.checkGruopList" :key="item.idCard">
<el-col :span="8">
<el-form-item label="姓名" :prop="'checkGruopList.' + index + '.name'" :rules="rules.name">
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手机号码" :prop="'checkGruopList.' + index + '.iphone'" :rules="rules.iphone">
<el-input v-model="item.iphone"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="身份证号码" :prop="'checkGruopList.' + index + '.idCard'" :rules="rules.idCard">
<el-input v-model="item.idCard"></el-input>
</el-form-item>
</el-col>
<el-divider border-style="dashed" />
</el-row>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="addGruop">新增</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
title: "",
checkGruopList: [{
name: '',
iphone: '',
idCard: ''
},
{
name: '',
iphone: '',
idCard: ''
},
{
name: '',
iphone: '',
idCard: ''
}
],
email: ''
},
rules: {
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
}],
iphone: [{
required: true,
message: '请输入手机号码',
trigger: 'blur'
},
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: '请输入正确格式的手机号码',
trigger: 'blur'
}
],
idCard: [{
required: true,
message: '请输入身份证号码',
trigger: 'blur'
},
{
pattern: /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/,
message: '请输入正确格式的身份证号码',
trigger: 'blur'
}
]
}
};
},
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();
},
addGruop() {
this.ruleForm.checkGruopList.push({
name: '',
iphone: '',
idCard: ''
});
}
}
}
</script>