问题描述
在项目开发中，我们经常会遇到表单保存的功能，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。
但是，这个表单如果是动态的，即：可以新增相同的表单。比如这个表单有输入框和下拉框需要校验，点击添加表格按钮，再新增一个相同的表单，同样新的这个表单对应的输入框和下拉框也需要校验。
代码思路
1、表单的主数据是要写成对象形式 :model="ruleForm" 不过既然是要动态的，肯定是要循环呢，所以，可以写成这样：
const ruleForm = reactive({
ruleObj:[
{
name: '',
region: '',
},
{
name: '',
region: '',
}
]
})
2、点击添加表格的时候，就可以直接push对应项就行啦
3、重点，因为是循环的，所以prop也要变成动态的了，要拼接上index，就变成根据索引去找对应的校验项了，即为：:prop="'ruleObj.' + index + '.name'" ，这样的话，就变成了：prop="ruleObj.0.name"、prop="ruleObj.1.name"、prop="ruleObj.2.name" ... 这样的话，就可以照顾到每一项中的每一个绑定的值了，校验就不会漏掉
4、校验规则写成内联就可以触发校验函数this.$refs["ruleForm"].validate((val) => {})了
下面附上vue2 及 vue3 示例
vue2.0
<template>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
<el-row v-for="(domain, index) in dynamicValidateForm.persons" :key="domain.key">
<el-col :span="8">
<el-form-item label="姓名" :prop="'persons.' + index + '.name'" :rules="rules.name">
<el-input v-model="domain.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="手机号码" :prop="'persons.' + index + '.iphone'" :rules="rules.iphone">
<el-input v-model="domain.iphone"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="身份证号码" :prop="'persons.' + index + '.idCard'" :rules="rules.idCard">
<el-input v-model="domain.idCard"></el-input>
</el-form-item>
</el-col>
<el-divider border-style="dashed" />
</el-row>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addPerson">新增</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
dynamicValidateForm: {
persons: [{
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();
},
addPerson() {
this.dynamicValidateForm.persons.push({
name: '',
iphone: '',
idCard: ''
});
}
}
}
</script>
image.png
vue3.0
<template>
<div>
<el-form ref="ruleFormRef" :model="ruleForm" label-width="120px">
<div v-for="(item, index) in ruleForm.ruleObj" :key="index">
<el-form-item label="Activity name" :prop="`ruleObj.${index}.name`" :rules="rules.name">
<el-input v-model="item.name" />
</el-form-item>
<el-form-item label="Activity zone" :prop="`ruleObj.${index}.region`" :rules="rules.region">
<el-select v-model="item.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts" setup>
import {
reactive,
ref
} from 'vue'
import type {
FormInstance,
FormRules
} from 'element-plus'
const ruleFormRef = ref();
const ruleForm = reactive({
ruleObj:[
{
name: '',
region: '',
},
{
name: '',
region: '',
}
]
})
const rules = reactive < FormRules > ({
name: [{
required: true,
message: 'Please input Activity name',
trigger: 'blur'
},
],
region: [{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
}],
})
const submitForm = async (formEl) => {
console.log(formEl.validate)
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!', fields)
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>
image.png
网友评论