vue生成动态表单校验

在Vue中生成动态表单校验可以使用Vue的表单校验插件，如Vuelidate或vee-validate。以下是使用Vuelidate的示例：

首先，安装Vuelidate：

npm install vuelidate

然后，在Vue组件中引入Vuelidate：

import { required, minLength } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      formData: {
        // 表单数据
      }
    };
  },
  validations: {
    formData: {
      // 表单数据的校验规则
      field1: {
        required, // 必填项校验
      },
      field2: {
        minLength: minLength(5), // 最小长度校验
      },
      // 更多字段的校验规则...
    }
  },
  methods: {
    submitForm() {
      this.$v.$touch(); // 触发表单校验
      if (!this.$v.$invalid) {
        // 校验通过，提交表单
      }
    }
  }
};

在表单中，使用`v-model`指令绑定表单数据，并在需要校验的表单元素上使用`v-validate`指令指定校验规则：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.field1" v-validate="'required'" type="text" placeholder="Field 1">
    <span v-if="$v.formData.field1.$error">Field 1 is required.</span>
    
    <input v-model="formData.field2" v-validate="'minLength:5'" type="text" placeholder="Field 2">
    <span v-if="$v.formData.field2.$error">Field 2 must have at least 5 characters.</span>
    
    <button type="submit">Submit</button>
  </form>
</template>

在上述示例中，`validations`对象定义了表单数据的校验规则。`v-validate`指令用于指定校验规则，可以传递一个字符串参数，也可以传递一个对象参数来指定更多的校验规则。

在提交表单时，可以使用`$v.$touch()`来触发表单校验，然后通过`$v.$invalid`检查校验结果，如果校验通过，可以继续提交表单。

这样，通过Vuelidate插件，你可以方便地生成动态表单校验。当然，也可以使用其他类似的表单校验插件来实现类似的功能。