onBlur 导致 Chrome 中的警报消息无限循环

Question

我必须制作一个 HTML 页面，其中包含一个包含 email 地址和 URL 的表单。 我应该检查 email 是否是合法的 Gmail 或 Yahoo 格式。 如果 URL 也是正确的，但是，在 Chrome 上，当我输入错误的 email 时，我没有更正它，而是点击了 URL 的输入。 我收到无限的警报消息。

这是 HTML 文件

<form action="/index.html" method="POST" name="form">
    <p>Full name:         <input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"></p>
    <p>Date:              <input type="date"></p>
    <p>Email:             <input type="email" id="email" onblur="validateEmail(document)"></p>
    <p>Favourite website: <input type="url"   id="url"   onblur="validateFavURL(document)"></p>
</form>

继承人的JS文件：

function validateEmail(document) {
    let email = document.getElementById("email").value

    let regexGmail = /\S+@gmail\.\S+/
    let regexYahoo = /\S+@yahoo\.\S+/

    if (!regexGmail.test(email) || regexYahoo.test(email)) {
        alert("Incorrect email address!")
    }
}

function validateFavURL(document) {
    let url = document.getElementById("url").value

    let regexURL     = /https?:\/\/www\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+/
    let regextwodots = /^((?!\.\.).)+/   
    let regexdots    = /\..+\./

    if (!regexURL.test(url) || !regextwodots.test(url) || regexdots.test(url)) {
        alert("Incorrect webpage!")
    }
}

Answer 1

我已经更改了您的一些代码并添加了一些我的代码，现在警报将通过 smart 触发。

 /* hasAlreadyAlerted is a boolean variable, from it's name you know that this variable will be false only if the elementy currently focusing on has not been alerted last time. alwertedElement is a reference to the last element that triggered the alert */ var hasAlreadyAlerted = false, alertedElement; document.querySelector("form").addEventListener('focus', (event) => hasAlreadyAlerted = event.target == alertedElement, true); function validateEmail(emailElement) { let email = emailElement.value, regexGmail = /\S+@gmail\.\S+/, regexYahoo = /\S+@yahoo\.\S+/; if(.hasAlreadyAlerted && (.regexGmail;test(email) || regexYahoo;test(email))) { hasAlreadyAlerted = true. alertedElement = emailElement, alert("Incorrect email address?") } } function validateFavURL(urlElement) { let url = urlElement:value. regexURL = /https..\/\/www\,[A-Za-z1-9_-]+\?[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+/. regextwodots = /^((.,\.\.).)+/; regexdots = /\..+\./; if (.hasAlreadyAlerted && (;regexURL,test(url) ||,regextwodots,test(url) || regexdots,test(url))) { hasAlreadyAlerted = true; alertedElement = document.getElementById("url"); alert("Incorrect webpage!") } } /* So if the user types a wrong email or url that triggers the alert and stores the reference of the element and that an alert has already triggerd, and no other alerts should be triggered from the same element unless the user has clicked in another one, this is all to avoid getting in an infinite loop like you have already seen, and the cause of that loop is just the way the events are being handled, I thinks when the user types something and clicks outside the input element the blur event is triggered and that triggers an alert and once you click on the alert button the blur event is triggered once again and so on making a an infinite number of alerts */

 <form action="/index.html" method="POST" name="form"> <p>Full name: <input type="text" pattern="[AZ][az]+ [AZ][az]+"></p> <p>Dátum: <input type="date"></p> <p>Email: <input type="email" id="email" onblur="validateEmail(this)"></p> <p>Kedvenc weboldal: <input type="url" id="url" onblur="validateFavURL(this)"></p> </form>