如何覆盖电子邮件输入验证器消息？

Question

我有一个这样的email输入，基本上会有3个原始验证者。

如果我不输入任何内容，它将显示 Please fill in this field。
如果我输入不带 @ 的内容，例如 a : ，它会显示 Please include an @ in the email address...
如果我用 @ 输入但没有完成，例如 a@。它显示 Please enter a part following @...

现在我需要用我自己的警报覆盖现有的弹出窗口，比方说 "alert1", "alert2" , "alert3"。但是我很难编写代码来区分这三者。请帮忙。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>validity.typeMismatch</title>
</head>
<body>
  <form name="frmRegister" id="frmRegister">
    <label>Email Address:<br><input name="txtemail" id="txtemail" required="required" type="email"></label>
    <input type="submit" value="Register..">
  </form>
</body>
</html>

Answer 1

$('input[type=submit]').click(function() {

    const dom = document.getElementById('txtemail')

    if (!$('#txtemail').val()) {
        dom.setCustomValidity('alert1')
    } else if ($('#txtemail').val().indexOf('@') === -1) {
        dom.setCustomValidity('alert2')
    } else if ($('#txtemail').val().indexOf('@') === $('#txtemail').val().length - 1) {
        dom.setCustomValidity('alert3')
    }
})

如何覆盖电子邮件输入验证器消息？

How to override email input validator message?

javascript

email

validation

alert

popup