不再为vue3.0中element UI表单遍历校验而烦恼，快速解决校验问题

正文

在使用Vue 3.0编写项目时，我们经常会遇到需要遍历的表单。这种表单通常可以增加或删除表单对象，并且需要对每个表单对象进行校验。

一、遍历表单的基本知识

在Vue 3.0中，我们可以使用v-for指令来遍历数组或对象。

<template>
  <div>
    <form>
      <ul>
        <li v-for="item in items" :key="item.id">
          <input v-model="item.name">
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    }
  }
}
</script>

这段代码定义了一个表单，其中包含一个无序列表。无序列表中的每一项都是一个列表项，列表项中包含一个输入框。输入框的值与items数组中相应对象的name属性绑定。

二、使用v-for和v-model实现遍历表单

我们可以使用v-for和v-model指令来实现遍历表单。

<template>
  <div>
    <form>
      <ul>
        <li v-for="item in items" :key="item.id">
          <label :for="`item-${item.id}`">{{ item.label }}</label>
          <input v-model="item.value" :id="`item-${item.id}`">
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Item 1', value: '' },
        { id: 2, label: 'Item 2', value: '' },
      ]
    }
  }
}
</script>

这段代码定义了一个表单，其中包含一个无序列表。无序列表中的每一项都是一个列表项，列表项中包含一个标签和一个输入框。标签的文本与items数组中相应对象的label属性绑定。输入框的值与items数组中相应对象的value属性绑定。

三、通过ref实现表单校验

我们可以通过ref实现表单校验。

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <ul>
        <li v-for="item in items" :key="item.id">
          <label :for="`item-${item.id}`">{{ item.label }}</label>
          <input v-model="item.value" :id="`item-${item.id}`" ref="inputs">
        </li>
      </ul>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Item 1', value: '' },
        { id: 2, label: 'Item 2', value: '' },
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$refs.inputs.forEach((input) => {
        if (!input.value) {
          alert('请填写所有字段')
          return
        }
      })
    }
  }
}
</script>

这段代码定义了一个表单，其中包含一个无序列表。无序列表中的每一项都是一个列表项，列表项中包含一个标签和一个输入框。标签的文本与items数组中相应对象的label属性绑定。输入框的值与items数组中相应对象的value属性绑定。表单有一个提交按钮，当点击提交按钮时，会调用onSubmit方法。onSubmit方法会遍历所有输入框，如果发现有输入框的值为空，则会弹出一个警告框，提示用户填写所有字段。

四、自定义校验规则和错误信息

我们可以自定义校验规则和错误信息。

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <ul>
        <li v-for="item in items" :key="item.id">
          <label :for="`item-${item.id}`">{{ item.label }}</label>
          <input v-model="item.value" :id="`item-${item.id}`" ref="inputs">
          <p v-if="item.error" :key="`error-${item.id}`" class="error">{{ item.error }}</p>
        </li>
      </ul>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Item 1', value: '', error: '' },
        { id: 2, label: 'Item 2', value: '', error: '' },
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$refs.inputs.forEach((input, index) => {
        if (!input.value) {
          this.items[index].error = '请填写该字段'
        } else {
          this.items[index].error = ''
        }
      })
    }
  }
}
</script>

这段代码定义了一个表单，其中包含一个无序列表。无序列表中的每一项都是一个列表项，列表项中包含一个标签和一个输入框。标签的文本与items数组中相应对象的label属性绑定。输入框的值与items数组中相应对象的value属性绑定。表单有一个提交按钮，当点击提交按钮时，会调用onSubmit方法。onSubmit方法会遍历所有输入框，如果发现有输入框的值为空，则会将该输入框对应的items数组对象中的error属性设置为'请填写该字段'。

五、实现动态校验

我们可以实现动态校验。

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <ul>
        <li v-for="item in items" :key="item.id">
          <label :for="`item-${item.id}`">{{ item.label }}</label>
          <input v-model="item.value" :id="`item-${item.id}`" ref="inputs">
          <p v-if="item.error" :key="`error-${item.id}`" class="error">{{ item.error }}</p>
        </li>
      </ul>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Item 1', value: '', error: '', rules: [
          {
            validator: (value) => {
              return value !== ''
            },
            message: '请填写该字段'
          }
        ] },
        { id: 2, label: 'Item 2', value: '', error: '', rules: [
          {
            validator: (value) => {
              return value.length >= 6
            },
            message: '密码长度必须大于等于6位'
          }
        ] },
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$refs.inputs.forEach((input, index) => {
        let valid = true
        this.items[index].rules.forEach((rule) => {
          if (!rule.validator(input.value)) {
            valid = false
            this.items[index].error = rule.message
          }
        })
        if (valid) {
          this.items[index].error = ''
        }
      })
    }
  }
}
</script>

这段代码定义了一个表单