element-ui 动态添加表单校验_element动态添加表单并验证-CSDN博客

本文链接：https://blog.csdn.net/Hanx_/article/details/136918887

文章介绍了如何在Vue.js应用中使用ElementUI构建一个包含姓名、手机、电子邮箱和地址的动态联系人表单，并实现基本的验证规则，如姓名和手机号的非空要求。同时提到手机号验证函数有待完善。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <el-form :model="ruleForm" label-position="left" label-width="100px"  :rules="rules" ref="myRuleForm">
            <div v-for="(item,index) in ruleForm.peopleList" :key="index">
                <el-form-item
                    label="姓名"
                    :prop="'peopleList.'+index+'.peopleName'"
                    :rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"
                    >
                    <el-input
                        v-model="item.peopleName"
                        placeholder="请输入姓名"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="手机"
                    :prop="'peopleList.'+index+'.peoplePhone'"
                    :rules="{ required: true, message: '请输入手机', trigger: 'blur' }"
                    >
                    <el-input
                        v-model="item.peoplePhone"
                        placeholder="请输入手机"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="电子邮箱"
                    >
                    <el-input
                        v-model="item.peopleEmail"
                        placeholder="请输入电子邮箱"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="地址"
                    >
                    <el-input
                        v-model="item.peopleAddress"
                        placeholder="请输入地址"
                    ></el-input>
                </el-form-item>
                <el-button @click.prevent="removePeople(item)">删除</el-button>
            </div>
            <br>
            <el-button @click="addPeople">添加联系人</el-button>
            <br>
            <el-button @click="submitForm('myRuleForm')">提交</el-button>
            <el-button @click="clearForm('myRuleForm')">清空</el-button>
        </el-form>
    </div>
</template>
<script>
export default {
    data () {
        var checkPhone = (rule, value, callback) => { // 手机号验证
            if (!value) {
                return callback(new Error('手机号不能为空'));
            } else {
                const reg = /^1\d{10}$/
                if (reg.test(value)) {
                callback();
                } else {
                return callback(new Error('请输入正确的手机号'));
                }
            }
        }
        return {
            ruleForm: {
                peopleList: [
                    {
                        peopleName: '',
                        peoplePhone: '',
                        peopleEmail: '',
                        peopleAddress: ''
                    }
                ]
            },
            rules: {

            },
        }
    },
    methods: {
        addPeople(){
            this.ruleForm.peopleList.push({
                peopleName: '',
                peoplePhone: '',
                peopleEmail: '',
                peopleAddress: ''
            });
        },
        removePeople(item) {
            if(this.ruleForm.peopleList.length==1){
                console.log('至少要填写一个');
            }else{
                var index = this.ruleForm.peopleList.indexOf(item)
                if (index !== -1) {
                    this.ruleForm.peopleList.splice(index, 1)
                }
            }

        },
        submitForm(form){
            this.$refs[form].validate((valid)=>{
                if(valid){
                    console.log(this.ruleForm);
                    console.log('可以提交');
                }else{
                    console.log('no no no');
                }
            })
        },
        clearForm(form){
            this.$refs[form].resetFields();
        }
    }
};
</script>

<style scoped='scoped' lang='scss'>

</style>

如果姓名跟手机没输入，会错误提示

问题：手机号校验没加上，还不知道怎么写，待研究