vue 在遍历中如何使用表单校验

在 Vue 中，可以使用表单校验库如 VeeValidate 或 ElementUI 中的表单校验功能来实现表单校验。这些库的使用方式类似，下面以 VeeValidate 为例：

1. 安装 VeeValidate

npm install vee-validate --save

2. 在 main.js 中引入 VeeValidate 并注册全局组件

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate)

3. 在需要校验的表单组件中，使用 `v-validate` 指令来标记需要校验的表单元素，并设置校验规则

<template>
  <form>
    <div>
      <label for="name">姓名：</label>
      <input id="name" name="name" v-validate="'required|max:10'" :class="{'is-invalid': errors.has('name')}" />
      <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
    </div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      this.$validator.validate().then(result => {
        if (result) {
          // 校验通过，提交表单逻辑
        } else {
          // 校验不通过，提示用户
        }
      })
    }
  }
}
</script>

<style>
.is-invalid {
  border-color: red;
}
.error {
  color: red;
}
</style>

以上代码中，`v-validate="'required|max:10'"` 指定了校验规则，表示该输入框必填且最多输入 10 个字符。`errors.has('name')` 和 `errors.first('name')` 分别用来判断该输入框是否有校验错误和获取第一个校验错误信息。`this.$validator.validate()` 用来触发表单校验，返回一个 Promise，用来判断校验结果。

在遍历中使用表单校验时，可以将校验规则和错误信息定义在数据中，然后在遍历中动态生成表单元素和校验规则。例如：

<template>
  <form>
    <div v-for="(field, index) in fields" :key="index">
      <label :for="field.name">{{ field.label }}：</label>
      <input :id="field.name" :name="field.name" v-model="form[field.name]" v-validate="field.rule" :class="{'is-invalid': errors.has(field.name)}" />
      <span v-show="errors.has(field.name)" class="error">{{ errors.first(field.name) }}</span>
    </div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
        email: ''
      },
      fields: [
        { name: 'name', label: '姓名', rule: 'required|max:10' },
        { name: 'age', label: '年龄', rule: 'required|integer|min:0|max:150' },
        { name: 'email', label: '邮箱', rule: 'required|email' }
      ]
    }
  },
  methods: {
    submitForm() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 校验通过，提交表单逻辑
        } else {
          // 校验不通过，提示用户
        }
      })
    }
  }
}
</script>

<style>
.is-invalid {
  border-color: red;
}
.error {
  color: red;
}
</style>

以上代码中，`fields` 数组用来定义表单元素的名称、标签和校验规则。在遍历中，根据 `fields` 数组动态生成表单元素和校验规则，使用 `v-validate="field.rule"` 来绑定校验规则。`this.$validator.validateAll()` 用来触发表单校验，返回一个 Promise，用来判断校验结果。