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>