HTML注冊頁面驗證注冊信息

 

在這里主要介紹兩種驗證方式，一種是點擊注冊按鈕后會提示最上方的出錯位置，彈出窗口提示格式不對。另一種是利用鼠標事件，在鼠標進行不同操作時會有不同的click事件。

這兩種都是利用javascript，同時也可以添加css美化界面。

 

第一種：首先建立一個form和一個table

<form action="" method="post">
<table>
  <tr>
     <td>用戶名</td>
     <td><input type="text" name="userName" id="userName"/></td>
   </tr>
   <tr>
     <td>密碼</td>
     <td><input type="password" name="pwd" id="pwd"/></td>
   </tr>
   <tr>
     <td>確認密碼</td>
     <td><input type="password" name="repwd" id="repwd"/></td>
   </tr>
   <tr>
     <td>郵箱 </td>
     <td><input type="text" name="email" id="email"/></td>
   </tr>
   <tr>
     <td>年齡</td>
     <td><input type="text" name="age" id="age"/></td>
   </tr>
   <tr>
      <td><a href="#" onclick="return valForm()">注冊</a> <a href="">重填</a></td>
   </tr>
</table>
</form>

這里提交不是用的submit按鈕，是用的一個超鏈接。

給超鏈接賦個id，在它的id下寫函數，再給每個文本框賦一個id，在函數里面寫代碼

//編寫javascript的格式
<script type="text/javascript" language="javascript">

  獲取值
function valForm(){
      var userName=document.getElementById("userName");
       var pwd=document.getElementById("pwd");
        var repwd=document.getElementById("repwd");
         var email=document.getElementById("email");
          var age=document.getElementById("age");
      if(userName.value==""){
          alert("用戶名不能為空");
          return false;
          }else if(userName.value.lenth<4||userName.value.lenth>16){
              alert("用戶名長度不符合要求\n用戶名長度為4-16個字符");
              return false;
              }else if(pwd.value!=repwd.value){
                  alert("兩次密碼不一致");
                  return false;
                  }
                  else if(email.value.indexOf(".")<0||email.value.indexOf("@")<0){
                      alert("郵箱名錯誤")
                      return false;
                      }else if(parseInt(age.value)<18||parseInt(age.value)>80){
            alert("不符合年齡");
            return false;              
                          }else{
                              document.forms[0].action="abc.html";
                              document.forms[0].submit();
                              return false;
                              }
      }

</script>

 下面是第二種，在輸入完文本內容，就會驗證文本內容是否符合要求

次方法里面添加了css。

<style type="text/css">
.tooltip {
    color: #333;
    background-color: #0CF;
    width: 150px;
    height: 30px;
    font-size: 12px;
}
.warningInfo {
    color: #F00;
    background-color: #F9C;
    width: 150px;
    height: 30px;
    font-size: 12px;
}
.rightInfo {
    color: green;
    background-color: transparent;
    width: 20px;
    height: 20px;
    font-size: 12px;
}
</style>
<script type="text/javascript">
 //用戶名文本框獲得焦點時顯示提示信息
 function displayUserNameInfo(){
     document.getElementById("userNameInfo").innerHTML="<span  style='color:red'>*</span>4-16個字符，包括英文，大小寫，數字等"
     document.getElementById("userNameInfo").className="tooltip";
     document.getElementById("userNameInfo").style.border="solid red 1px";
     }
     function valUserName(){
         if(document.getElementById("userName").value==""){
             document.getElementById("userNameInfo").innerHTML="用戶名不能為空";
             document.getElementById("userNameInfo").className="warningInfo";
             }else{
                 document.getElementById("userNameInfo").innerHTML="對";
             document.getElementById("userNameInfouserNameInfo").className="rightInfo";
                 }
         }
    function displaypwd(){
         document.getElementById("pwdInfo").innerHTML="<span  style='color:red'>*</span>4-16個字符，包括英文，大小寫，數字等"
     document.getElementById("pwdInfo").className="tooltip";
     document.getElementById("pwdInfo").style.border="solid red 1px";
     }
     function valpwd(){
          if(document.getElementById("pwd").value==""){
             document.getElementById("pwdInfo").innerHTML="密碼不能為空";
             document.getElementById("pwdInfo").className="warningInfo";
             }else{
                 document.getElementById("pwdInfo").innerHTML="對";
             document.getElementById("userNameInfouserNameInfo").className="rightInfo";
                 }
         }
   function okFocus(){
       document.getElementById("OK").value="";
       }
    function okMouseover(){
        document.getElementById("OKInfo").style.color="#000";
        }
   function okMouseout(){
       document.getElementById("OKInfo").style.color="#ccc";
       obj.style.border="solid 1px #ccc";
       }
</script>
</head>

<body>
<form action="JS.html" method="post" onsubmit="return validateForm()">
  <table align="center">
    <tr>
      <td>USRE</td>
      <td><input type="text" name="userName" id="userName"  onfocus="displayUserNameInfo()" onblur="valUserName()"/></td>
      <td><div id="userNameInfo"></div></td>
    </tr>
    <tr>
      <td>PWD</td>
      <td><input type="password" name="pwd" id="pwd" onfocus="displaypwd()" onblur="valpwd()"/></td>
      <td><div id="pwdInfo"></div></td>
    </tr>
    <tr>
      <td>PWD</td>
      <Td><input type="text" name="OK" value="建議用手機號碼注冊" id="OK" onfocus="okFocus()" onmouseover="okMouseover()" onmouseout="okMouseout(this)"/><div id="OKInfo">6-18個字符，可使用字母數字</div></Td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" value="登錄" /></td>
    </tr>
    <tr>
      <td><a href="#" onclick="return submitForm()">登錄</a></td>
      <td><a href="#" onclick="return submitForm()"><img src="Resources/authImgServlet.jpg" width="100" height="30" alt=""></a></td>
    </tr>
  </table>
</form>