zoukankan      html  css  js  c++  java
  • Element中vfor动态数据循环表单验证的处理

    1.功能需求

    如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?

    2.Dom结构如下

    表单验证的时候:

    1. prop改为 :prop,形式为’List.’+index+’.startDate’
    2. List.’+index+’.startDate就是数据结构与数据
    3. 每一个循环中的都需要加:rules
        <el-form :model="resumes" size="mini" :rules="rules" ref="resumes">
          <div v-for="(item, index) in resumes.List" :key="index">
            <el-form-item label="开始时间:" :prop="'List.'+ index +'.startDate'" :rules="rules.startDate">
              <el-input v-model="item.startDate" size="mini" />
            </el-form-item>
            <el-form-item label="结束时间:" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate">
              <el-input v-model="item.endDate" type="password" />
            </el-form-item>
            <el-form-item label="手机号:" :prop="'List.'+ index +'.phone'" :rules="rules.phone">
              <el-input v-model="item.phone" size="mini" />
            </el-form-item>
          </div>
        </el-form>

    3.data结构如下:rules为个表单项的验证规则

        data() {
          return {
            resumes: {
              List: [{
                startDate: '',
                endDate: '',
                phone: ''
              }]
            },
            rules: { // 添加校验
              startDate: [{
                required: true,
                message: '请输入开始时间',
                trigger: 'blur'
              }],
              endDate: [{
                required: true,
                message: '请输入结束时间',
                trigger: 'blur'
              }
              ],
              phone: [{
                required: true,
                message: '请输入手机号',
                trigger: 'blur'
              }],
            },
          };
  • 相关阅读:
    TypeScript-基础-09-声明文件
    TypeScript-基础-08-类型断言
    TypeScript-基础-07-函数的类型
    TypeScript-基础-06-数组的类型
    TypeScript-基础-05-对象的类型—接口
    TypeScript-基础-04-联合类型
    TypeScript-工程
    小白学前端03
    小白学前端02
    小白学前端
  • 原文地址:https://www.cnblogs.com/zjianfei/p/14630278.html
Copyright © 2011-2022 走看看