Vue.js 中使用 VeeValidate 实现不同表单的验证规则组合

如果您想在两个不同的表单提交中实现不同的规则组合，您可以为每个表单创建独立的验证规则集合。以下是一个示例，展示了如何使用 VeeValidate 实现这一点：

<template>
  <div>
    <!-- 第一个表单 -->
    <form @submit='submitForm1'>
      <input v-model='input1' v-validate=''required'' />
      <span v-show='errors1.has('input1')'>{{ errors1.first('input1') }}</span>
      <button type='submit'>提交表单1</button>
    </form>

    <!-- 第二个表单 -->
    <form @submit='submitForm2'>
      <input v-model='input2' v-validate=''required|min:6'' />
      <span v-show='errors2.has('input2')'>{{ errors2.first('input2') }}</span>
      <button type='submit'>提交表单2</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: '',
      errors1: {},
      errors2: {}
    }
  },
  methods: {
    submitForm1() {
      this.$validator.validateAll('form1').then(result => {
        if (result) {
          // 表单1验证通过，执行相应操作
        }
      });
    },
    submitForm2() {
      this.$validator.validateAll('form2').then(result => {
        if (result) {
          // 表单2验证通过，执行相应操作
        }
      });
    }
  }
}
</script>

在上面的示例中，我们创建了两个表单，分别是 form1 和 form2。每个表单都有一个输入字段和一个提交按钮。我们使用 v-validate 指令为每个输入字段应用了不同的验证规则。

在 submitForm1 和 submitForm2 方法中，我们使用 this.$validator.validateAll('form1') 和 this.$validator.validateAll('form2') 来分别验证 form1 和 form2 的所有字段。这样，我们可以根据每个表单的验证结果执行相应的操作。

通过在 validateAll 方法中指定不同的验证规则集合名称，您可以实现在两个表单提交中使用不同的规则组合。

请注意，您需要根据实际情况进行适当的代码调整和错误处理，以便在验证通过或失败时采取相应的操作。

希望这个示例能帮助您实现不同规则组合的两个表单提交。如果您有任何问题，请随时向我提问！