lementUI Form表单里使用 v-for循环创建表单元素校验

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>