HTML5：与模式验证自定义验证消息

Question

我希望我的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

当我在输入电子邮件错误的格式，然后点击“发送”，显示预期的消息：

然而，当我开始打字再次，显示下面的默认浏览器消息（我的浏览器设置为荷兰语）：

反正有防止显示默认的消息？我可以在输入时禁用验证吗？

Answer 1

你可以做你的this..Assuming文本ID为 “text1” 中..

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

或

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

以上任何可以使用，但在你的情况我比较喜欢keydown事件。 ..