时间戳

首页 > 解决方案 > 如何在 Vuejs 中对输入使用 HTML5 验证检查

javascript - 如何在 Vuejs 中对输入使用 HTML5 验证检查

问题描述

如何form.checkValidity()在 vuejs 2 中使用带有自定义组件形式的 html5？

使用 html5 输入，表单验证效果很好：

<form name="myform" ref="formref">
  <input type="text" required /> 
  <button type="submit" @click="submitForm">Ok</button>
</form>
...
methods: {
  submitForm() {
    if (this.$refs.formref.checkValidity()) sendData();
    else showError();
  }
}

但是如果我使用自定义组件，那将不起作用：

<form name="myform" ref="formref">
  <MyCustomInputComponent :required="true" /> 
  <button type="submit" @click="submitForm">Ok</button>
</form>

checkValidity()的形式将永远返回true。

问题是我应该如何实现MyCustomInputComponent让它与 HTML5 表单验证一起工作？

标签： javascripthtmlvue.jsvalidationvuejs2

解决方案

我看到两个选项：

  1. 尝试验证组件内的自定义字段。为此，我将使用@keyup事件在提交之前触发验证。如果您使用的是 vuetify（它是一个非常常见的库），您可以使用 rules 标签来执行此操作。

  2. 为此，请使用名为 veeValidate的外部库。

推荐阅读