vue elementUI 表单校验：传入model的是数组的情况

elementUI的Form 表单验证中，官网文档中，默认传入的表单数据对象是对象类型，那么遇到表单数据对象是数组时该怎么处理呢，本文通过实例介绍了数组数据对象的绑定方法。【form表单数据：】【elementUI 表单：】...

只想做IT界的霸主

4199人浏览 · 2021-09-07 08:43:59

只想做IT界的霸主 · 2021-09-07 08:43:59 发布

elementUI的Form 表单验证中，官网文档中，默认传入的表单数据对象是对象类型，那么遇到表单数据对象是数组时该怎么处理呢，本文通过实例介绍了数组数据对象的绑定方法。

【form表单数据：】

在这里插入图片描述
【elementUI 表单：】

【-------------------------------------------------------------------------------------------------------】
【实现复杂数据类型表单验证：】

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css"
      rel="stylesheet"
    />
    <style>
        .el-button,.el-date-editor.el-input, .el-date-editor.el-input__inner{width: 100%;}
    </style>
  </head>
  <body>
    <div id="app">
        <!-- 1.绑定 ---------------------------------------------------------->
        <!-- <el-form  label-width="100px" ref="formRef" :model="form" :rules="rules">
            <template>
                <h4>工作经历</h4>
                <el-form-item label="工作单位" prop="unit">
                    <el-input  placeholder="请填写工作单位"  v-model="form.workExperience.unit"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="undergoStartTime">
                    <el-date-picker  type="date" placeholder="请选择开始时间" v-model="form.workExperience.undergoStartTime"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="undergoEndTime">
                    <el-date-picker type="date"  placeholder="请选择结束时间" v-model="form.workExperience.undergoEndTime" ></el-date-picker>
                </el-form-item>
                <el-form-item label="担任职务" prop="job">
                    <el-input placeholder="请选择担任职务" v-model="form.workExperience.job"></el-input>
                </el-form-item>
                <el-form-item label="离职原因" prop="cause">
                    <el-input placeholder="请填写离职原因" v-model="form.workExperience.cause"></el-input>
                </el-form-item>
            </template>
        </el-form> -->

        <!-- 2.循环 -------------------------------------------------------->
        <!-- <el-form  label-width="100px" ref="formRef" :model="form" :rules="rules"   v-for="(item,index) in form.workExperience" :key="index">
            <template>
                <h4>工作经历-{{index + 1}}</h4>
                <el-form-item label="工作单位" :prop=`workExperience.${index}.unit`>
                    <el-input  placeholder="请填写工作单位"  v-model="item.unit"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" :prop=`workExperience.${index}.undergoStartTime`>
                    <el-date-picker  type="date" placeholder="请选择开始时间" v-model="item.undergoStartTime"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :prop=`workExperience.${index}.undergoEndTime`>
                    <el-date-picker type="date"  placeholder="请选择结束时间" v-model="item.undergoEndTime" ></el-date-picker>
                </el-form-item>
                <el-form-item label="担任职务" :prop=`workExperience.${index}.job`>
                    <el-input placeholder="请选择担任职务" v-model="item.job"></el-input>
                </el-form-item>
                <el-form-item label="离职原因" :prop=`workExperience.${index}.cause`>
                    <el-input placeholder="请填写离职原因" v-model="item.cause"></el-input>
                </el-form-item>
            </template>
        </el-form> -->
        <!-- 3.循环绑定并验证表单 -->
        <el-form  label-width="100px" ref="formRef" :model="item" :rules="rules"   v-for="(item,index) in form.workExperience" :key="index">
            <template>
                <h4>工作经历-{{index + 1}}</h4>
                <el-form-item label="工作单位" prop="unit">
                    <el-input  placeholder="请填写工作单位"  v-model="item.unit"></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop='undergoStartTime'>
                    <el-date-picker  type="date" placeholder="请选择开始时间" v-model="item.undergoStartTime"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="undergoEndTime">
                    <el-date-picker type="date"  placeholder="请选择结束时间" v-model="item.undergoEndTime" ></el-date-picker>
                </el-form-item>
                <el-form-item label="担任职务" prop='job'>
                    <el-input placeholder="请选择担任职务" v-model="item.job"></el-input>
                </el-form-item>
                <el-form-item label="离职原因" prop='cause'>
                    <el-input placeholder="请填写离职原因" v-model="item.cause"></el-input>
                </el-form-item>
            </template>
        </el-form>
        <el-row>
            <el-button @click="add">添加工作经历</el-button>
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-button type="primary" @click="submit">提交</el-button>
        </el-row>

    </div>
</body>
<script>
var vm = new Vue({
    el: "#app",
    data() {
    return {
        form: {
			workExperience: [{
                unit: '',
                isWoke:false,
                undergoStartTime: '',
                undergoEndTime:'',
                job: '',
                cause: '',
			}]
        },
        rules: {
            unit: [{
                required: true,
                message: '请输入工作单位',
                trigger: 'blur',
            }],
            undergoStartTime: [{
                required: true,
                message: '请选择起止时间',
                trigger: 'blur',
            }],
            undergoEndTime: [{
                required: true,
                message: '请选择结束时间',
                trigger: 'blur',
            }],
            job: [{
                required: true,
                message: '请输入担任职务',
                trigger: 'blur',
            }],
            cause: [{
                required: true,
                message: '请选输入离职原因',
                trigger: 'blur',
            }]
        },
    }
    },
    methods: {
        add(){
            this.form.workExperience.push({
                unit: '',
                isWoke:false,
                undergoStartTime: '',
                undergoEndTime:'',
                job: '',
                cause: '',
			})
        },
        async submit(){
            this.$refs.formRef.validate((valid) => {
            if (valid) {
                this.$message.success('submit!');
            } else {
                this.$message.error('验证不通过');
                return false;
            }
        });
        }
    }
})    
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^