如何使用带有 Vue 的 HTML 5 验证添加错误消息
Posted
技术标签:
【中文标题】如何使用带有 Vue 的 HTML 5 验证添加错误消息【英文标题】:How to add an error message using HTML 5 Validation with Vue 【发布时间】:2021-05-17 07:34:05 【问题描述】:我遵循了一个关于使用 Vue.js 进行 html 5 表单验证的精彩教程,我尝试了太多次在失败的输入旁边添加消息错误,但我做不到。 这是教程: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");
;
我想在每个输入字段旁边的 span 中显示错误消息
【问题讨论】:
【参考方案1】: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>
demo
【讨论】:
以上是关于如何使用带有 Vue 的 HTML 5 验证添加错误消息的主要内容,如果未能解决你的问题,请参考以下文章
带有Typescript和beforeEnter保护的Vue-router,如何使用经过验证的数据?