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>