以某种方式显示错误

时间:2018-04-14 00:18:50

标签: javascript html

     <!DOCTYPE html>
        <html>
          <body>
            <div class="needContent">
              <label for="Password">Password</label>
              <span class="red-star">&lowast;</span>
              <input type="password" name="Password" id="Password" required="required" onkeyup="starShow()" pattern="^(?=.*\[a-z\])(?=.*\[A-Z\])(?=.*\d)\[a-zA-Z\d\]{8,}$" onchange="check()">
            </div>
            <div class="needContent">
              <label for="Retype_Password">Retype Password</label>
              <span class="red-star">&lowast;</span>
              <input type="password" name="Retype_Password" id="Retype_Password" pattern="^(?=.*\[a-z\])(?=.*\[A-Z\])(?=.*\d)\[a-zA-Z\d\]{8,}$" required="required" onkeyup="starShow()" onchange="check()">
              <p id="status"></p>

<div id="phoneNumber" class="needContent">
                    <label for="Phone_Number" >Phone Number</label>
                    <span class="red-star">&lowast;</span>
                    <input type="tel" name="Phone_Number" id="Phone_Number" 
                    required="required" onchange="Error()" placeholder="999-999-9999" 
                    onkeyup="starShow()" >
                    <p id="showEorror"></p>
                </div>
            </div>


            <script>
    function Error() {
        var phn = document.getElementById("Phone_Number").value;
        if(phn[3]!="-" && phn[7] != "-" ) {
            document.getElementById("showEorror").innerHTML="<span>X</span> The area code of phone number 999-999-9999 can't be all zeros.";
        }else if(phn[0] == 0 || phn[1] == 0 && phn[2] == 0){
            document.getElementById("showEorror").innerHTML="<span>X</span> The area code of phone number 999-999-9999 can't be all zeros.";
        } else {
            document.getElementById("showEorrr").style.display = "none";
        }
    }
              function check() {
                var pass1 = document.getElementById("Password").value;
                var pass2 = document.getElementById("Retype_Password").value;

                if (pass1 != "" && pass2 != "") {
                  if (pass1 != pass2) {
                    document.getElementById("status").innerHTML = "<span>X</span> Doesn't Match.";
                  }
                }
              }
            </script>
          </body>
        </html>

enter image description here 所以我正在研究我的学校项目,我正试图显示错误&#34;不匹配&#34;和手机一样,但我不知道自己做错了什么。我附上了输出的屏幕截图。

1 个答案:

答案 0 :(得分:1)

在正确输入密码后,您没有重置#status文本。试试这个:

if (pass1 != "" && pass2 != "") {
  if (pass1 != pass2) {
    document.getElementById("status").innerHTML = "<span>X</span> Doesn't Match.";
  } else document.getElementById("status").textContent = 'ok';
}

对于手机部分,您有两个错误:"showEorror" vs "showEorrr",这意味着错误文本不会消失。我建议改为使用showErrorshowPhoneError