iView表单循环表单验证

PC端现在用的最多的组件库就是iView，通常我们都是一个表单验证后就提交了，如果是动态新添加的表单，如何做验证并提交呢。首先先看一下要实现的样子：

1.循环表单验证

你会发现，两个表单在分别点击完成的时候都分别作了验证。

iView的Form表单，需要两个属性，rule是表单验证规则，比如该字段是否需要必填等，即使是循环动态生成的表单，若是相同的表单项，那么验证规则一定是一样的，所以rule所关联的就是一个变量；还有一个属性model是表单数据对象，那么我们既然是循环生成的表单，并且每一次点击完成的时候是提交当前的表格的数据，所以我们想到model是循环生成表单的list的某一项，那么我们就可以定义变量了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 表单验证规则
uploadFormRule: {
  mechanismAddress: [
    { required: true, message: '请输入服务机构地址', trigger: 'blur' }],
  mechanismName: [
    { required: true, message: '请输入服务机构名称', trigger: 'blur' }],
  mechanismPhone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(\d{11}|\d{3}-\d{8})$/, message: '请输入正确的联系方式', trigger: 'blur' }
  ],
  mechanismUrl: [
    { type: 'url', message: '请输入正确的服务机构网址', trigger: 'blur' }
  ]
},
list: [
  {
    mechanismAddress: "",
    mechanismName: "",
    mechanismPhone: "",
    mechanismUrl: ""
  }
]

那么循环表单的时候就可以写成(忽略一些样式所需要的元素)：

1
<Form v-for="(li, index) in list" :key="index"  :rules="uploadFormRule"  :model="li"></Form>

那么现在就是最重要的问题了，我们知道如果是当个表单验证的时候就是

1
2
this.$refs[name].validate((valid) => {})
// name指的是model所对应的对象名字

那么this.$ref是获取注册过的组件，所以需要使用ref来注册组件，通常单表单注册的时候就是model所关联的对象，但是是循环生成的表单并且都需要验证，那ref就需要换一个写法，ref是一个对象，也就是说点击完成的时候我们验证的是当前的这个表单，所以ref需要关联当前的index,所以表单写成：

1
2
3
4
5
<Form v-for="(li, index) in list" :key="index"  :rules="uploadFormRule"  :model="li" :ref="'list' + index"></Form>
// 当然ref里边list可以替换成想要的字符串，比如li
// 验证表单的时候：
let form = 'list' + index
this.$refs[form][0].validate((valid) => {})

之所以这样写，把refs打印出来是这样的
2.打印ref

页面有几个表单，就注册了几个表单，refs是一个对象，注册时使用ref=”‘list’ + index”来命名每一个表单，自然取出时也需要拼接这样的一个字符串，从上图中可以看出，每一个ref对象（每一个表单项都一个数组），打印一下我们可以看出，我们每个表单所对应的model绑定数据对象以及rule
3.张开refs中某一项

总结：循环表单验证的时候注册组件时主要加上该表单的唯一标识，index或者key