myElement.textContent显示不一致

Question

我正在使用javascript调用一个函数，以在具有不同id的两个密码输入上使用模糊事件来验证电子邮件输入。

如果我从密码输入点击到电子邮件输入，它会显示我的错误消息。但是，如果我从一个密码输入点击到另一个，我的错误消息不会显示。它确实注册了错误消息正下方的console.log消息，因此正在进行验证，但不会显示错误消息。

document.forms.myCreateAcctForm.noValidate = true;
var myCreateAcctForm = document.getElementById('myCreateAcctForm');
var myEmailTxtBox = document.getElementById('myEmailTxtBox');  
var myPasswordTxtBox1 = document.getElementById('myPasswordTxtBox1');
var myPasswordTxtBox2 = document.getElementById('myPasswordTxtBox2');
var myCreateNewAcctBtn = document.getElementById('myCreateNewAcctBtn');
var myClearNewAcctBtn = document.getElementById('myClearNewAcctBtn');
var myEmailErrSpan = document.getElementById('myEmailErrSpan');
var myPassword1ErrSpan = document.getElementById('myPassword1ErrSpan');
var myPassword2ErrSpan = document.getElementById('myPassword2ErrSpan');

var myCreateAcctFormErrP = document.getElementById('myCreateAcctFormErrP');
var myEmail;
var myPassword1;
var myPassword2;
var myUsers = [];
var myNumUsers = myUsers.length;
function MyUser(myEmail, myPassword) 
{
this.myEmail = myEmail;
this.myPassword = myPassword;
}
function isValidEmail()
{
myEmail = myEmailTxtBox.value;

var isValidEmail = true;
var myEmailRegExPattern = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,4})+$/;

myEmailErrSpan.textContent = "";
myCreateAcctFormErrP.textContent = "";

if (myEmail === "")
{
isValidEmail = false;
myEmailErrSpan.textContent = "Email is required";
}
else if (!myEmailRegExPattern.test(myEmail.toUpperCase()))
{
isValidEmail = false;
myEmailErrSpan.textContent = "Invalid email format";
}
else
{
for (var index = 0; index < myUsers.length; index++)
{
if (myEmail === myUsers[index].myEmail)
{
isValidEmail = false;
myEmailErrSpan.textContent = "Email has already been used";
break;
}
}      
}  
return isValidEmail;
}
function isValidPassword()
{
myPassword1 = myPasswordTxtBox1.value;
myPassword2 = myPasswordTxtBox2.value;
var isValidPassword1 = true;
var isValidPassword2 = true;
var myPasswordRegExPattern = /^(?=.*?[0-9])(?=.*?[a-z])(?=.*?[A-Z])(?=.*?([^ws]|[_])).{8,}$/

myPassword1ErrSpan.textContent = "";
myPassword2ErrSpan.textContent = "";

if (myPassword1 === "")
{
isValidPassword1 = false;
myPassword1ErrSpan.textContent = "Password is required";
console.log("password1 blank");  
}  

if (isValidPassword1 === true && !myPasswordRegExPattern.test(myPassword1))
{
isValidPassword1 = false;
myPassword1ErrSpan.textContent = "Invalid password format";    
console.log("password1 wrong format");  
}

if (myPassword2 === "")
{
isValidPassword2 = false;
myPassword2ErrSpan.textContent = "Matching password is required";
console.log("password2 blank");  
}

if (isValidPassword2 === true && !myPasswordRegExPattern.test(myPassword2))
{
isValidPassword2 = false;
myPassword2ErrSpan.textContent = "Invalid password format";    
console.log("password2 wrong format");  
}

if (isValidPassword1 === true && isValidPassword2 === true && myPassword1 !== myPassword2)
{
isValidPassword1 = false;
isValidPassword2 = false;
myPassword1ErrSpan.textContent = 'Passwords must match';
myPassword2ErrSpan.textContent = 'Passwords must match';
console.log("passwords not equal");  
}
return isValidPassword1 && isValidPassword2;
}
function isValidCreateAcctForm()
{
var isValidEmailBool = isValidEmail();
var isValidPasswordBool = isValidPassword();

myCreateAcctFormErrP.textContent = "";

if (isValidEmailBool && isValidPasswordBool)
{
createAccount();
}
else 
{
myCreateAcctFormErrP.textContent = "Please fix errors and try again";
}  
}
function createAccount()
{
var myUser = new MyUser(myEmail, myPassword1);
myUsers.push(myUser);
}
function clearCreateAcctForm()
{
myEmailTxtBox.value = "";  
myPasswordTxtBox1.value = "";
myPasswordTxtBox2.value = "";

myEmailErrSpan.textContent = "";
myPassword1ErrSpan.textContent = "";
myPassword2ErrSpan.textContent = "";
myCreateAcctFormErrP.textContent = "";
}
window.addEventListener('load', clearCreateAcctForm);
myCreateAcctForm.addEventListener('submit', function (e) 
{
e.preventDefault();
isValidCreateAcctForm();
}, false);
myCreateAcctForm.addEventListener('reset', function (e) 
{
e.preventDefault();
clearCreateAcctForm();
}, false);
window.addEventListener('focus', function(event)
{
myCreateAcctFormErrP.textContent = "";

switch (event.target.id)
{
case 'myEmailTxtBox':
myEmailErrSpan.textContent = "";
break;      
case 'myPasswordTxtBox1':
myPassword1ErrSpan.textContent = "";
myPassword2ErrSpan.textContent = "";
break;
case 'myPasswordTxtBox2':
myPassword1ErrSpan.textContent = "";
myPassword2ErrSpan.textContent = "";
break;      
}
}, true);
window.addEventListener('blur', function(event)
{
switch (event.target.id)
{
case 'myEmailTxtBox':
isValidEmail();
break;      
case 'myPasswordTxtBox1':
isValidPassword();
break;
case 'myPasswordTxtBox2':
isValidPassword();
break;      
}
}, true);

.myErrorMsg {
color: #CC3422;
font-weight: bold;
}
.myCreateAcctFormBody {
display: grid;
grid-template-columns: 9rem 12rem auto;
grid-template-rows: auto;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
}

<form name="myCreateAcctForm" id="myCreateAcctForm">
<div class="myCreateAcctFormBody">
<label for="myEmailTxtBox">Email:</label>
<input type="email" name="myEmailTxtBox" id="myEmailTxtBox">
<span id="myEmailErrSpan" class="myErrorMsg"></span>

<label for="myPasswordTxtBox1">Password:</label>
<input type="password" name="myPasswordTxtBox1" id="myPasswordTxtBox1">
<span id="myPassword1ErrSpan" class="myErrorMsg"></span>

<label for="myPasswordTxtBox2">Confirm Password:</label>
<input type="password" name="myPasswordTxtBox2" id="myPasswordTxtBox2">
<span id="myPassword2ErrSpan" class="myErrorMsg"></span>
</div>

<input type="submit" value="Submit" id="myCreateNewAcctBtn">
<input type="reset" id="myClearNewAcctBtn">    
<p id="myCreateAcctFormErrP" class="myErrorMsg"></p>
</form>

Answer 1

当您关注其中一个时，您将从两个密码错误范围中删除字符串。

试着这样写：

switch (event.target.id)
{
case 'myEmailTxtBox':
myEmailErrSpan.textContent = "";
break;      
case 'myPasswordTxtBox1':
myPassword1ErrSpan.textContent = "";
break;
case 'myPasswordTxtBox2':
myPassword2ErrSpan.textContent = "";
break;      
}

---

示例：

document.forms.myCreateAcctForm.noValidate = true;
var myCreateAcctForm = document.getElementById('myCreateAcctForm');
var myEmailTxtBox = document.getElementById('myEmailTxtBox');  
var myPasswordTxtBox1 = document.getElementById('myPasswordTxtBox1');
var myPasswordTxtBox2 = document.getElementById('myPasswordTxtBox2');
var myCreateNewAcctBtn = document.getElementById('myCreateNewAcctBtn');
var myClearNewAcctBtn = document.getElementById('myClearNewAcctBtn');
var myEmailErrSpan = document.getElementById('myEmailErrSpan');
var myPassword1ErrSpan = document.getElementById('myPassword1ErrSpan');
var myPassword2ErrSpan = document.getElementById('myPassword2ErrSpan');

var myCreateAcctFormErrP = document.getElementById('myCreateAcctFormErrP');
var myEmail;
var myPassword1;
var myPassword2;
var myUsers = [];
var myNumUsers = myUsers.length;
function MyUser(myEmail, myPassword) 
{
this.myEmail = myEmail;
this.myPassword = myPassword;
}
function isValidEmail()
{
myEmail = myEmailTxtBox.value;

var isValidEmail = true;
var myEmailRegExPattern = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,4})+$/;

myEmailErrSpan.textContent = "";
myCreateAcctFormErrP.textContent = "";

if (myEmail === "")
{
isValidEmail = false;
myEmailErrSpan.textContent = "Email is required";
}
else if (!myEmailRegExPattern.test(myEmail.toUpperCase()))
{
isValidEmail = false;
myEmailErrSpan.textContent = "Invalid email format";
}
else
{
for (var index = 0; index < myUsers.length; index++)
{
if (myEmail === myUsers[index].myEmail)
{
isValidEmail = false;
myEmailErrSpan.textContent = "Email has already been used";
break;
}
}      
}  
return isValidEmail;
}
function isValidPassword()
{
myPassword1 = myPasswordTxtBox1.value;
myPassword2 = myPasswordTxtBox2.value;
var isValidPassword1 = true;
var isValidPassword2 = true;
var myPasswordRegExPattern = /^(?=.*?[0-9])(?=.*?[a-z])(?=.*?[A-Z])(?=.*?([^ws]|[_])).{8,}$/

myPassword1ErrSpan.textContent = "";
myPassword2ErrSpan.textContent = "";

if (myPassword1 === "")
{
isValidPassword1 = false;
myPassword1ErrSpan.textContent = "Password is required";
console.log("password1 blank");  
}  

if (isValidPassword1 === true && !myPasswordRegExPattern.test(myPassword1))
{
isValidPassword1 = false;
myPassword1ErrSpan.textContent = "Invalid password format";    
console.log("password1 wrong format");  
}

if (myPassword2 === "")
{
isValidPassword2 = false;
myPassword2ErrSpan.textContent = "Matching password is required";
console.log("password2 blank");  
}

if (isValidPassword2 === true && !myPasswordRegExPattern.test(myPassword2))
{
isValidPassword2 = false;
myPassword2ErrSpan.textContent = "Invalid password format";    
console.log("password2 wrong format");  
}

if (isValidPassword1 === true && isValidPassword2 === true && myPassword1 !== myPassword2)
{
isValidPassword1 = false;
isValidPassword2 = false;
myPassword1ErrSpan.textContent = 'Passwords must match';
myPassword2ErrSpan.textContent = 'Passwords must match';
console.log("passwords not equal");  
}
return isValidPassword1 && isValidPassword2;
}
function isValidCreateAcctForm()
{
var isValidEmailBool = isValidEmail();
var isValidPasswordBool = isValidPassword();

myCreateAcctFormErrP.textContent = "";

if (isValidEmailBool && isValidPasswordBool)
{
createAccount();
}
else 
{
myCreateAcctFormErrP.textContent = "Please fix errors and try again";
}  
}
function createAccount()
{
var myUser = new MyUser(myEmail, myPassword1);
myUsers.push(myUser);
}
function clearCreateAcctForm()
{
myEmailTxtBox.value = "";  
myPasswordTxtBox1.value = "";
myPasswordTxtBox2.value = "";

myEmailErrSpan.textContent = "";
myPassword1ErrSpan.textContent = "";
myPassword2ErrSpan.textContent = "";
myCreateAcctFormErrP.textContent = "";
}
window.addEventListener('load', clearCreateAcctForm);
myCreateAcctForm.addEventListener('submit', function (e) 
{
e.preventDefault();
isValidCreateAcctForm();
}, false);
myCreateAcctForm.addEventListener('reset', function (e) 
{
e.preventDefault();
clearCreateAcctForm();
}, false);
window.addEventListener('focus', function(event)
{
myCreateAcctFormErrP.textContent = "";

switch (event.target.id)
{
case 'myEmailTxtBox':
myEmailErrSpan.textContent = "";
break;      
case 'myPasswordTxtBox1':
myPassword1ErrSpan.textContent = "";
break;
case 'myPasswordTxtBox2':
myPassword2ErrSpan.textContent = "";
break;      
}
}, true);
window.addEventListener('blur', function(event)
{
switch (event.target.id)
{
case 'myEmailTxtBox':
isValidEmail();
break;      
case 'myPasswordTxtBox1':
isValidPassword();
break;
case 'myPasswordTxtBox2':
isValidPassword();
break;      
}
}, true);

.myErrorMsg {
color: #CC3422;
font-weight: bold;
}
.myCreateAcctFormBody {
display: grid;
grid-template-columns: 9rem 12rem auto;
grid-template-rows: auto;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
}

<form name="myCreateAcctForm" id="myCreateAcctForm">
<div class="myCreateAcctFormBody">
<label for="myEmailTxtBox">Email:</label>
<input type="email" name="myEmailTxtBox" id="myEmailTxtBox">
<span id="myEmailErrSpan" class="myErrorMsg"></span>

<label for="myPasswordTxtBox1">Password:</label>
<input type="password" name="myPasswordTxtBox1" id="myPasswordTxtBox1">
<span id="myPassword1ErrSpan" class="myErrorMsg"></span>

<label for="myPasswordTxtBox2">Confirm Password:</label>
<input type="password" name="myPasswordTxtBox2" id="myPasswordTxtBox2">
<span id="myPassword2ErrSpan" class="myErrorMsg"></span>
</div>

<input type="submit" value="Submit" id="myCreateNewAcctBtn">
<input type="reset" id="myClearNewAcctBtn">    
<p id="myCreateAcctFormErrP" class="myErrorMsg"></p>
</form>