當您關注其中一個時，您正在從兩個密碼錯誤跨度中刪除字符串。
試著這樣寫：
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])(?=.*?([^\w\s]|[_])).{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>
