HTML5：带有模式验证的自定义验证消息答案

【问题标题】：HTML5: Custom validation message with pattern validationHTML5：带有模式验证的自定义验证消息
【发布时间】：2014-12-02 10:29:32
【问题描述】：

我希望我的 html 表单在电子邮件地址格式不正确时显示自定义错误消息

<form>
    <input type="text" pattern="^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$" name="email" oninvalid="this.setCustomValidity('custom message')" oninput="setCustomValidity('')" />
    <input type="submit" value="Send"/>
</form>

JSFiddle example

当我输入格式错误的电子邮件并单击“发送”时，会显示预期的消息：

但是，当我再次开始输入时，会显示以下默认浏览器消息（我的浏览器设置为荷兰语）：

有没有办法阻止默认消息显示？我可以在输入时禁用验证吗？

【问题讨论】：

标签： html html5-validation

【解决方案1】：

你可以这样做..假设你的文本框 id 是“text1”..

$("#text1").change(function(e) {
         e.preventDefault();
    });

或

 $("#text1").keydown(function(e) {
         e.preventDefault();
    });

以上任何一个都可以使用，但在您的情况下，我更喜欢 keydown 事件...

【讨论】：