覆盖默认浏览器表单验证

Question

假设您有这样的电子邮件输入：

<input type='email' placeholder='Email:' required />

在Chrome和其他类型设置为电子邮件的现代浏览器中启用验证，即仅发送电子邮件，例如＆＃34;某些东西＆＃34;将是有效的。它显示如下默认弹出消息：

我想知道是否有可能利用这些事件进行自定义验证？并禁用默认浏览器。

Answer 1

首先，您需要禁用默认浏览器验证。为此，只需将novalidate添加到表单元素：

<form class="custom-validated-form" novalidate >
    <input type='email' placeholder='Email:' required />
</form>

要进行一些自定义验证，您需要捕获提交事件，并在自定义验证失败时执行.preventDefault()：

$('.custom-validated-form').submit(function(event) {

    // your custom validation

    event.preventDefault()
})

好主意可能是使用第三方库（例如parsley.js）为您处理验证。

Answer 2

您可以通过在novalidate标记中添加form标记来停用客户端HTML5浏览器验证：

＆＃13;

＆＃13;

<!-- This validates as normal -->
<form method="post" action="#">
  <input type="email" placeholder="Validate Email:" required />
  <input type="submit">
</form>

<!-- This adds the `novalidate` flag -->
<form method="post" action="#" novalidate>
  <input type="email" placeholder="Novalidate Email:" required />
  <input type="submit">
</form>

＆＃13;

＆＃13;

＆＃13;

这将允许您仍然使用HTML输入类型（例如＆＃34; email＆＃34;）并阻止浏览器运行验证。

从那时起，您将可以实施自己的解决方案，或者集成许多第三方验证插件之一（例如jQuery Validation）。

此外，如果您希望保持 HTML5验证，但更改验证消息，则可以使用setCustomValidity - 它可能会出现一些浏览器问题，但它可能会出现问题。一个可行的选择。