Vue中的表单验证

时间:2019-02-26 12:33:36

标签: javascript vuejs2

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

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

的链接

HTML

keypress

JS

mouseout

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

在 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