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

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

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

在Chrome和其他类型的现代浏览器中,将类型设置为电子邮件可以启用验证,即,只有类似“ something @ something”的电子邮件才有效.它显示默认的弹出消息,如下所示：

我想知道是否有可能利用这些事件以将其用于自定义验证？并禁用默认的浏览器.

解决方法:

首先,您需要禁用默认浏览器验证.为此,只需在表单元素中添加novalidate即可：

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

要进行一些自定义验证,您需要捕获Submit事件并在自定义验证失败的情况下执行.preventDefault()：

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

    // your custom validation

    event.preventDefault()
})

好主意可能是使用诸如parsley.js之类的第三方库来为您处理验证.