我正在尝试理解并尝试验证一个简单的表单,但是我面临的问题是,在页面加载时,它会显示“错误”或“成功”消息,该消息应仅显示在{{1 }}或INotifyPropertyChanged
事件。
此外,我无法弄清楚如何验证下拉菜单,最后,当用户单击“提交”时,它可以检查所有字段是否已填写并正确提交表单。以下是我的代码和指向JSFiddle
的链接HTML
keypress
JS
mouseout
答案 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