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

Question

我必须制作一个 HTML 页面，其中包含一个包含电子邮件地址和 URL 的表单。我应该检查电子邮件是否是合法的 Gmail 或 Yahoo!格式，如果 URL 也正确。但是，在 Chrome 上，当我输入错误的电子邮件，然后在不更正的情况下单击进入 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

我已经更改了你的一些代码并添加了一些我的代码，现在警报将被智能触发。

/*
  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="[A-Z][a-z]+ [A-Z][a-z]+"></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>

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

onBlur causes infinite loop of alert messages in Chrome

javascript

alert

infinite-loop

onblur