Question

我有这样的电子邮件输入，基本上会有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')
    }
})

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

1 个答案: