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>