myElement.textContent 显示不一致

Question

我正在使用 javascript 调用一个函数来验证电子邮件输入，在两个具有不同 ID 的密码输入上使用模糊事件。如果我从密码输入单击到电子邮件输入，它会显示我的错误消息。但是，如果我从一个密码输入单击另一个密码，则不会显示我的错误消息。它确实注册了紧接错误消息下方的 console.log 消息，因此正在进行验证，但未显示错误消息。.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])(?=.*?([^\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>