如何使用 HTML 添加错误消息 5 Vue 验证
How to add an error message using HTML 5 Validation with Vue
我遵循了关于 HTML 5 使用 Vue.js 进行表单验证的很好的教程,我尝试了太多次在失败的输入旁边添加消息错误,但我做不到。
这是教程:https://logaretm.com/blog/2019-05-03-html-aided-vuejs-form-validation/
这是我的代码:
function updateMessage(el, vm) {
vm.errors = Object.assign({}, vm.errors, {
[el.name]: el.validationMessage
});
}
export const ValidateMixin = {
data: () => ({
errors: {}
}),
computed: {
hasErrors() {
// Check if we have errors.
return Object.keys(this.errors).some(key => {
console.log(this.errors)
return !!this.errors[key];
});
}
},
directives: {
validate: {
bind(el, _, vnode) {
const vm = vnode.context;
el.addEventListener("input", e => {
updateMessage(e.target, vm);
});
vnode.context.$on("validate", () => {
updateMessage(el, vm);
});
}
}
},
methods: {
validate() {
this.$emit("validate");
}
}
};
我想在每个输入字段旁边的范围内显示错误消息
mixin 的 errors
对象 属性 包含元素 name
到该元素的验证错误消息的映射。例如,在 <input name="myEmail" type="email" v-validate>
的输入中输入无效的电子邮件地址会在 errors.myEmail
.
中创建验证消息
您可以使用模板中的 errors
对象将元素的错误消息绑定到相应 input
:
旁边的 span
<input name="myEmail" type="email" v-validate>
<span v-if="errors.myEmail">{{ errors.myEmail }}</span>
我遵循了关于 HTML 5 使用 Vue.js 进行表单验证的很好的教程,我尝试了太多次在失败的输入旁边添加消息错误,但我做不到。 这是教程:https://logaretm.com/blog/2019-05-03-html-aided-vuejs-form-validation/
这是我的代码:
function updateMessage(el, vm) {
vm.errors = Object.assign({}, vm.errors, {
[el.name]: el.validationMessage
});
}
export const ValidateMixin = {
data: () => ({
errors: {}
}),
computed: {
hasErrors() {
// Check if we have errors.
return Object.keys(this.errors).some(key => {
console.log(this.errors)
return !!this.errors[key];
});
}
},
directives: {
validate: {
bind(el, _, vnode) {
const vm = vnode.context;
el.addEventListener("input", e => {
updateMessage(e.target, vm);
});
vnode.context.$on("validate", () => {
updateMessage(el, vm);
});
}
}
},
methods: {
validate() {
this.$emit("validate");
}
}
};
我想在每个输入字段旁边的范围内显示错误消息
mixin 的 errors
对象 属性 包含元素 name
到该元素的验证错误消息的映射。例如,在 <input name="myEmail" type="email" v-validate>
的输入中输入无效的电子邮件地址会在 errors.myEmail
.
您可以使用模板中的 errors
对象将元素的错误消息绑定到相应 input
:
span
<input name="myEmail" type="email" v-validate>
<span v-if="errors.myEmail">{{ errors.myEmail }}</span>