html 如何显示包含电子邮件模式验证的自定义验证消息

osh3o9ms  于 2023-02-14  发布在  其他
关注(0)|答案(1)|浏览(120)

我希望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
当我以错误的格式输入电子邮件并点击“发送”时,预期的消息显示:

但是,当我再次开始键入时,显示以下默认浏览器消息(我的浏览器设置为荷兰语):

有什么方法可以阻止默认消息显示吗?我可以在键入时禁用验证吗?

e5nqia27

e5nqia271#

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

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

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

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

相关问题