javascript - vue 中的表单验证

Question

我试图理解并解决验证一个简单的表单，但我面临的问题是，当页面加载时，它显示“错误”或“成功”消息，该消息应该仅在 上显示keypress 或 mouseout 事件。

此外，我不知道如何验证下拉列表，最后当用户单击“提交”时，它可以检查所有字段是否已填写并正确以提交表单。以下是我的代码和 JSFiddle 的链接

HTML

<div id="app">
  <div>
    <label for="name">Name</label>
    <input type="text" @keypress="checkField" v-model="name">
    <span v-if="checkName">Checks out </span>
    <span v-if="!checkName">Pleas enter valid name</span>
  </div>

  <div>
    <label for="Age">Age</label>
    <input type="number" @keypress="checkField2" v-model="age">
    <span v-if="checkAge">Enter Valid Age </span>
    <span v-if="!checkAge">Not a valid age</span>
  </div>

<div>
  <select name="" id="">
    <option disabled selected>Please Choose</option>
    <option v-for="gender in genders" :value="gender">
      {{gender}}
    </option>
  </select>
  <span v-if="genderField">Please select a gender</span>
  <span v-if="!genderField">Green means go</span>
</div>
 <div>
   <button @click="checkSubmit(e)">Submit</button>
 </div>
</div>

JS

 data: {
    name: "",
    checkName: "",
    age: "",
    checkAge: "",
    genders : ["Male",'Female',"Other"],
    genderField: "" 
  },
  methods: {
    checkField() {
      if (!this.amount) {
        this.checkName = true
      }
    },
    checkGender() {
                if(!this.genders){
            this.genderField = true
        }
    },
    checkSubmit(e){
        //check if all fields are filled before submitting
      alert("it is working")
      e.preventDefault()
    }
  }

})

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>