javascript - 覆盖默认浏览器表单验证

Question

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

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

在 Chrome 和其他将类型设置为电子邮件的现代浏览器中启用验证，即只有像“something@something”这样的电子邮件才有效。它显示如下默认弹出消息:

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

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)来为您处理验证可能是个好主意。