Question

我正在尝试理解并尝试验证一个简单的表单，但是我面临的问题是，在页面加载时，它会显示“错误”或“成功”消息，该消息应仅显示在{{1 }}或INotifyPropertyChanged事件。

此外，我无法弄清楚如何验证下拉菜单，最后，当用户单击“提交”时，它可以检查所有字段是否已填写并正确提交表单。以下是我的代码和指向JSFiddle

的链接

HTML

keypress

JS

mouseout

Answer 1

有很多方法可以验证表单。对于这种情况，我有一些提示。

1）将form元素与@submit.prevent="..."事件处理程序一起使用。它将确保更好的用户体验；

2）不要使用@key*事件处理程序来验证或格式化值，而应使用@input。它将使您免于头痛；

3）Vue provide a API观看所有属性更改，不仅是在用户更改属性时。

要解决问题，您可以创建一个validation属性，并根据其他属性更改设置其内容。

请参见以下示例：

顺便说一句：我建议您看看vuelidate

const app = new Vue({
  data() {
    return {
      name: null,
      age: null,
      gender: null,
      genders: ['Male', 'Female', "Other"],
      validations: {}
    }
  },
  methods: {
    submit(e) {
      const keys = Object.keys(this.validations);

      // required fields
      const required = ['name', 'age', 'gender'];
      for (const key in required) {
        if (!keys.includes(required[key])) {
          alert('Please, insert a ' + required[key]);
          return;
        }
      }

      for (const key in this.validations) {
        if (!this.validations[key]) {
          alert('Please, insert valid ' + key);
          return;
        }
      }
      alert("ok");
    }
  },
  watch: {
    name(newValue) {
      this.validations.name = newValue > '';
    },
    age(newValue) {
      this.validations.age = newValue > 0;
    },
    gender(newValue) {
      this.validations.gender = this.genders.includes(newValue);
    }
  }
});

app.$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit.prevent="submit">
    <div>
      <label for="name">Name</label>
      <input type="text" v-model="name">
      <span v-if="'name' in validations && validations.name">Checks out </span>
      <span v-if="'name' in validations && !validations.name">Pleas enter valid name</span>
    </div>

    <div>
      <label for="age">Age</label>
      <input type="number" v-model="age">
      <span v-if="'age' in validations && !validations.age">Enter Valid Age</span>
    </div>

    <div>
      <label for="gender">Gender</label>
      <select name="gender" v-model="gender">
    <option disabled selected>Please Choose</option>
    <option v-for="gender in genders" :value="gender">
      {{gender}}
    </option>
  </select>
      <span v-if="'gender' in validations && validations.gender">Green means go</span>
      <span v-if="'gender' in validations && !validations.gender">Please select a gender</span>
    </div>

    <input type="submit" value="Submit">
  </form>
</div>

Answer 2

在 Angular 中，我们有一个内置选项来验证表单。但是 Vue 在创建和验证表单时提供的功能非常有限。为了添加更多功能，我们必须安装一个名为 Vuelidate 的单独包来验证我们的 Vue 应用程序表单。

什么是 Vuelidate？
根据 Vuelidate website:
“Vuelidate 2 是一个简单但功能强大的轻量级基于模型的验证，适用于 Vue.js 3 和 Vue 2.x。”

安装

npm install @vuelidate/core @vuelidate/validators

参考：
https://aaqibqs.medium.com/learn-form-validation-in-vue-3-in-10-minutes-with-vuelidate-8929c5059e66

Vue中的表单验证

2 个答案: