vue.js - Vuelidate 两个表单在一个组件中

Question

我想在一个组件中验证两种完全不同的形式。我创建了它们两个，配置了验证、方法、数据等。一切都很好，而且，两种形式都可以正常工作，但有一点问题。我写了一些代码来解释我遇到的问题。

这是我在组件中的表单。

  <!-- First Form -->
  <div>
    <form @submit.prevent="submitFormFirst">
      <div class="form-group">
        <label>Name</label>
        <input v-model="name" type="name" class="form-control" placeholder="Name" />
        <small v-if="!$v.name.required && $v.name.$dirty">This field is required.</small>
      </div>
      <!-- Save Button -->
      <button type="submit">Save Form 1</button>
    </form>
  </div>

  <!-- Second Form -->
  <div>
    <form @submit.prevent="submitFormSecond">
      <div>
        <label>Surname</label>
        <input v-model="surname" type="name" placeholder="Surname" />
        <small v-if="!$v.surname.required && $v.surname.$dirty">This field is required.</small>
      </div>
      <!-- Save Button -->
      <button type="submit">Save Form 2</button>
    </form>
  </div>

如您所见，有两种不同的表单，它们有自己的提交按钮。这是我的数据的样子；

data() {
  return {
    name: null,
    surname: null,
  };

还有我的验证...

validations: {
  name: {
    required,
  },
  surname: {
    required,
  }
}

最后，我创建了两种方法。一个用于 Form1，一个用于 Form2。

methods: {
  submitFormFirst() {
    if (!this.$v.$invalid) {
      alert("First Form Submitted.");
      let form = {
        name: this.name,
      };
      console.log(form);
    } else {
      alert("First Form Error.");
    }
  },
  submitFormSecond() {
    if (!this.$v.$invalid) {
      alert("Second Form Submitted.");
      let form = {
        surname: this.surname,
      };
      console.log(form);
    } else {
      alert("Second Form Error.");
    }
  },
}

所以他们也有自己的方法，他们完全分开，或者我确实是这样想的......问题是，当页面加载时，我立即尝试在第一个表单的输入中输入一些内容并单击“节省”。它发送"First Form Error"带有警报的消息。然后我在第二个表单的输入中输入一些内容并提交它，然后它工作，它在控制台中打印数据并发送“提交”。信息。所以当我从第一个表格开始时，我得到一个错误。当我编写并提交第二个表单时，问题就消失了。然后我再次尝试第一种形式，我发现它也有效。当我从第二种形式开始时，也会发生同样的情况。换句话说，我尝试提交的第一个表单出错了，然后我提交了另一个表单。当我回到我首先尝试的形式时，我发现它也有效。

标签： vue.jsvalidationvuelidate

Answer 1

If you want validate two forms you can change method that submit:

methods: {
  submitFormFirst() {
    this.$v.name.$touch()
    if (!this.$v.name.$invalid) {
      alert("First Form Submitted.");
      let form = {
        name: this.name,
      };
      console.log(form);
    } else {
      alert("First Form Error.");
    }
  },
  submitFormSecond() {
    this.$v.surname.$touch()
    if (!this.$v.surname.$invalid) {
      alert("Second Form Submitted.");
      let form = {
        surname: this.surname,
      };
      console.log(form);
    } else {
      alert("Second Form Error.");
    }
  },
}