iview 表单提交数据的时候验证问题

问题描述: iview Form表单提交时因数据格式不统一,有写数据表单里面含有数组,验证出现问题

---

1, iview表单验证的步骤

• 1, Form 标签里面需要写上 ref="FormData" :model="FormData" :rules="ruleValidate"

• 2, 给需要验证的每个 FormItem标签 设置prop="address" 属性

• 3, Input标签里面是 v-model="address"

• 4, 在操作保存按钮时，添加方法验证对整个表单进行校验

this.$refs[name].validate((valid) => {
  if (valid) {
    ...
  }
}
复制代码

2, 因为表单数据格式的原因无法正常验证表单

• 后端给的需要提交的数据格式如下

// 表单需要提交的数据
  FormData: any = {
    TeacherName: '',
    address: '',  // 老师的地址 需要进行必填字段验证
    StudentOne: [
      {
        name: '',
        age: '',
        address: '',
        sex: ''  // 需要进行必填字段验证
      }
    ],
    StudentTwo: [
      {
        name: '',
        age: '',
        address: '',
        sex: ''  // 需要进行必填字段验证
      }
    ]
  }
复制代码

3, 错误代码如下:

• html部分代码如下

<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
    <!-- 班主任  信息 -->
    <FormItem label="班主任姓名：" prop="TeacherName">
        <Input v-model="FormData.TeacherName" placeholder="请输入班主任姓名"></Input>
    </FormItem>
    <FormItem label="班主任地址：" prop="address">
        <Input v-model="FormData.address" placeholder="请输入班主任地址"></Input>
    </FormItem>
    
    
    <!-- 学生1 信息 -->
    <FormItem label="学生1姓名：" prop="name">
        <Input v-model="FormData.StudentOne[0].name" placeholder="请输入学生1的姓名"></Input>
    </FormItem>
    <FormItem label="学生1性别：" prop="sex">
        <Input v-model="FormData.StudentOne[0].sex" placeholder="请输入学生1的性别"></Input>
    </FormItem>
     <FormItem label="学生1地址：" prop="address">
        <Input v-model="FormData.StudentOne[0].address" placeholder="请输入学生1地址"></Input>
    </FormItem>
    
    <!-- 学生2 信息 -->
    <FormItem label="学生2姓名：" prop="name">
        <Input v-model="FormData.StudentTwo[0].name" placeholder="请输入学生2的姓名"></Input>
    </FormItem>
    <FormItem label="学生2性别：" prop="sex">
        <Input v-model="FormData.StudentTwo[0].sex" placeholder="请输入学生2的性别"></Input>
    </FormItem>
    <FormItem label="学生2地址：" prop="address">
        <Input v-model="FormData.StudentTwo[0].address" placeholder="请输入学生2地址"></Input>
    </FormItem>
</Form>
复制代码

• 验证规则代码如下

ruleValidate: any = {
    // 如果html代码如上,这个验证规则的情况下是三个地址都会验证的,是哪个地址都成了必填项
    // 但是我们现在只需要必填老师的地址, 而两个学生的地址是不必填的
    // 并且这样性别是验证不到的
   address: [
      { required: true, message: '请输入班主任地址', trigger: 'blur' }
   ],
   sex: [
      { required: true, message: '请输入学生1性别', trigger: 'blur' }
   ]
}
复制代码

4, 正确代码如下:

• html部分代码如下

<Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100">
    <!-- 班主任  信息 -->
    <FormItem label="班主任姓名：" prop="editName">
        <Input v-model="FormData.editName" placeholder="请输入班主任姓名"></Input>
    </FormItem>
    <FormItem label="班主任地址：" prop="address">
        <Input v-model="FormData.address" placeholder="请输入班主任地址"></Input>
    </FormItem>
    
    
    <!-- 学生1 信息 -->
    <FormItem label="学生1姓名：" prop="StudentOne[0].name">
        <Input v-model="FormData.StudentOne[0].name" placeholder="请输入学生1的姓名"></Input>
    </FormItem>
    <FormItem label="学生1性别：" prop="StudentOne[0].sex">
        <Input v-model="FormData.StudentOne[0].sex" placeholder="请输入学生1的性别"></Input>
    </FormItem>
     <FormItem label="学生1地址：" prop="StudentOne[0].address">
        <Input v-model="FormData.StudentOne[0].address" placeholder="请输入学生1地址"></Input>
    </FormItem>
    
    <!-- 学生2 信息 -->
    <FormItem label="学生2姓名：" prop="StudentTwo[0].name">
        <Input v-model="FormData.StudentTwo[0].name" placeholder="请输入学生2的姓名"></Input>
    </FormItem>
    <FormItem label="学生2性别：" prop="sex">
        <Input v-model="FormData.StudentTwo[0].sex" placeholder="请输入学生2的性别"></Input>
    </FormItem>
    <FormItem label="学生2地址：" prop="address">
        <Input v-model="FormData.StudentTwo[0].address" placeholder="请输入学生2地址"></Input>
    </FormItem>
</Form>
复制代码

• 验证规则代码如下

ruleValidate: any = {
   address: [
      { required: true, message: '请输入班主任地址', trigger: 'blur' }
   ],
   'StudentOne[0].sex': [
      { required: true, message: '请输入学生1性别', trigger: 'blur' }
   ],
   'StudentTwo[0].sex': [
      { required: true, message: '请输入学生2性别', trigger: 'blur' }
   ]
}
复制代码

备注:

1, 如果提交表单对象里面含有数组层级关系, 需要在prop里面写出来这个层级关系

prop="TeacherName" ( FormData下面的数据 )
prop="StudentTwo[0].name" (FormData 下面数组里面的数据 )
复制代码

2, 同时在验证的时候也需要写成层级关系,并且加上引号,如果不加引号会报错

验证关系里面需要这样写-----> 'StudentOne[0].sex'
复制代码

• 如有问题,欢迎指正

• 本文为原创,如需转载,请注明出处: iview 表单提交数据的时候验证问题