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

Posted 2023-02-16

【中文标题】如何在 Vuejs 中对输入使用 HTML5 验证检查

【英文标题】：How to use HTML5 validation check for inputs in Vuejs

【发布时间】：2021-11-27 09:07:09

【问题描述】：

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

使用 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 表单验证一起工作？

【参考方案1】：

我看到两个选项：

尝试验证组件内的自定义字段。为此，我将使用@keyup 事件在提交之前触发验证。如果你正在使用 vuetify（它是一个非常常见的库），你可以使用 rules 标签来做到这一点。

为此使用名为 veeValidate 的外部 library。