JS为页面输入框做Check

最新推荐文章于 2024-01-15 02:52:58 发布
drainstory
最新推荐文章于 2024-01-15 02:52:58 发布
阅读量1.5k
点赞数 1
分类专栏： JS 文章标签： js JS
本文链接：https://blog.csdn.net/drainstory/article/details/8181768
版权
JS 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NewUserRight</title>
<link href="../html/pic/images/style.css" rel="stylesheet" type="text/css" />
<script language="javascript">
    function JumpSubmit() {
    alert("Creat User Failed...Please Try Again!!!");
        window.location.replace("../cgi-bin/user");
    window.parent.leftFrame.location = "../cgi-bin/usermainleft";
    }
    function JumpBack() {       
        window.location.replace("../cgi-bin/user");
    window.parent.leftFrame.location = "../cgi-bin/usermainleft";
    }
    function LoadOn(){
      document.getElementById("usernoerrorimg").style.visibility = "hidden";/**visible**/
      document.getElementById("usernameerrorimg").style.visibility = "hidden";/**visible**/
      document.getElementById("passwordfirsterrorimg").style.visibility = "hidden";/**visible**/
      document.getElementById("passwordseconderrorimg").style.visibility = "hidden";/**visible**/
      document.getElementById("submitbutton").disabled = true;
    }
    function BlurOn(textidname, picidname){
      if(document.getElementById(textidname).value == ""){

    document.getElementById(picidname).style.visibility = "visible";

      }
    }
    function CheckInput(inputid, errorimgid){
     

      var regu= /^([a-zA-Z0-9]|[._]){4,10}$/;



      if(document.getElementById(inputid).value != "" && regu.exec(document.getElementById(inputid).value) != null){

    document.getElementById(errorimgid).style.visibility = "hidden";

      }else{

    document.getElementById(errorimgid).style.visibility = "visible";

        document.getElementById("submitbutton").disabled = true;

      }

      

      if(document.getElementById("secondpasswordtext").value != document.getElementById("firstpasswordtext").value){

    document.getElementById("submitbutton").disabled = true;

    document.getElementById("passwordseconderrorimg").style.visibility = "visible";

      }else if(document.getElementById("secondpasswordtext").value == document.getElementById("firstpasswordtext").value &&
    regu.exec(document.getElementById("secondpasswordtext").value) != null){
    document.getElementById("passwordseconderrorimg").style.visibility = "hidden";

      }


      var inputtages = document.getElementsByTagName("input");

      var countflag = 0;

      

      for(var i = 0; i<inputtages.length; i++){

    if((inputtages[i].type == "password" || inputtages[i].type == "text") && inputtages[i].value != ""){

      countflag++;

    }

    if(countflag == 4 && document.getElementById("firstpasswordtext").value == document.getElementById("secondpasswordtext").value &&
          regu.exec(document.getElementById("usernotext").value) != null &&
          regu.exec(document.getElementById("usernametext").value) != null &&
          regu.exec(document.getElementById("firstpasswordtext").value) != null &&
          regu.exec(document.getElementById("secondpasswordtext").value) != null){

      document.getElementById("submitbutton").disabled = false;

    }

      }
    }
</script>
</head>

<body οnlοad="LoadOn();">
<form id="newuserform" name="newuserform" action="../cgi-bin/newuser" method="POST">
<div style="border: 6px ridge #00AAEC; background-color: #E7EEF6; height: 473px;">
      <ul>
    <li style="margin: 10pt; text-align: center; text-indent: -100px;">用 户 NO.：<span style="word-spacing: 50px;"> </span>
      <input type="text" id="usernotext" style="height: 20px; width: 130px;border:2px solid #bfd8e0;" οnblur="BlurOn('usernotext', 'usernoerrorimg');" οnkeyup="CheckInput('usernotext', 'usernoerrorimg');"/>
      <img id="usernoerrorimg" src="../html/pic/images/icon/error.png" />
    </li>
        <li style="margin: 10pt; text-align: center; text-indent: -100px;">用户名称：<span style="word-spacing: 50px;"> </span>
      <input type="text" id="usernametext" style="height: 20px; width: 130px;border:2px solid #bfd8e0;" οnblur="BlurOn('usernametext', 'usernameerrorimg');" οnkeyup="CheckInput('usernametext', 'usernameerrorimg');" />
      <img id="usernameerrorimg" src="../html/pic/images/icon/error.png" />
    </li>
    <li style="margin: 10pt; text-align: center; text-indent: -100px;">用户密码：<span style="word-spacing: 50px;"> </span>
      <input type="password" id="firstpasswordtext" style="height: 20px; width: 130px;border:2px solid #bfd8e0;" οnblur="BlurOn('firstpasswordtext', 'passwordfirsterrorimg');" οnkeyup="CheckInput('firstpasswordtext', 'passwordfirsterrorimg');" />
      <img id="passwordfirsterrorimg" src="../html/pic/images/icon/error.png" />
    </li>
    <li style="margin: 10pt; text-align: center; text-indent: -100px;">密码确认：<span style="word-spacing: 50px;"> </span>
      <input type="password" id="secondpasswordtext" style="height: 20px; width: 130px;border:2px solid #bfd8e0;" οnblur="BlurOn('secondpasswordtext', 'passwordseconderrorimg');" οnkeyup="CheckInput('secondpasswordtext', 'passwordseconderrorimg');" />
      <img id="passwordseconderrorimg" src="../html/pic/images/icon/error.png" />
    </li>
      </ul>
    <div ><input type="submit" value="确定" id="submitbutton"
            style="border: 5px outset #ECEADE; width: 50px; height: 30px; margin-left: 290px; background-color: #808080;" οnclick="JumpSubmit()"/>
      <input type="button" value="返回"
            style="border: 5px outset #ECEADE; width: 50px; height: 30px; margin-left: 100px; background-color: #808080;" οnclick="JumpBack()"/></div>
  </div>

  <br><div class="message-nonedisplaywarning">messageflag</div>
</body>
</html>