各种常用注册页面表单验证

最新推荐文章于 2023-01-17 22:28:28 发布

yoloV

最新推荐文章于 2023-01-17 22:28:28 发布

阅读量6.8k

点赞数 3

分类专栏： JS 文章标签：表单正则表达式 JS判断

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是JQuery的验证，不过这么多验证方式接着第一个后面都会写出来的

1、最原始的注册验证方式，需要通过点击提交按钮才验证

先上图

具体代码

    Html代码   
    
  
 <span style="font-size: medium;"><span style="font-size: large;"><!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>无标题文档</title>  
 </head>  
   
 <body>  
 <div id="content">  
     <!--首页的中间部分-->  
 <SCRIPT language="javascript" type="text/javascript">  
 //checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() &&  
 function validateform(){  
     if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck()  && agree( ))   
        return true;  
      else  
        return false;  
        
       
 }  
  //validate Name  
 function checkUserName(){    
 var fname = document.userfrm.fname.value;  
 var lname = document.userfrm.lname.value;  
 // validate first Name  
 if(fname.length != 0){  
     for(i=0;i<fname.length;i++){  
     var ftext = fname.substring(i,i+1);  
         if(ftext < 9 || ftext > 0){  
             alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");  
             document.userfrm.fname.focus();  
             document.userfrm.fname.select();  
             return false  
         }  
     }  
 }  
 else{  
     alert("请输入“名字”文本框");  
     document.userfrm.fname.focus();  
     return false  
 }  
 // Validate last name  
 if(fname.length != 0){  
     for(i=0;i<fname.length;i++){  
     var ftext = fname.substring(i,i+1);  
         if(ftext < 9 || ftext > 0){  
             alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");  
             document.userfrm.fname.focus();  
             document.userfrm.fname.select();  
             return false  
         }  
     }  
 }  
 else{  
     alert("请输入“名字”文本框");  
     document.userfrm.fname.focus();  
     return false  
 }  
 // Validate last name  
 if(lname.length != 0){  
     for(j=0;j<lname.length;j++){  
     var ltext = lname.substring(j,j+1);  
         if(ltext < 9 || ltext > 0){  
             alert("姓氏中包含数字 \n"+"请删除姓氏中的数字和特殊字符");  
             document.userfrm.lname.focus();  
             document.userfrm.lname.select();  
             return false  
         }  
     }  
 }  
 else{  
     alert("“姓氏”文本框为空");  
     document.userfrm.lname.focus();  
     return false;  
     }  
 return true;  
 }   
 // Login Name Validation  
 function sNameCheck(){  
 var sname = document.userfrm.sname.value;  
 var illegalChars = /\W/;  
     if(sname.length != 0){  
         if(illegalChars.test(sname)){  
         alert("登录名无效");  
         document.userfrm.sname.select();  
         return false;  
         }  
     }  
     else{  
     alert("是否忘记输入登录名？");  
     document.userfrm.sname.focus();  
     return false  
     }  
     return true;  
 }  
 //Validate password  
 function passCheck(){  
 var userpass = document.userfrm.pass.value;  
 var ruserpass = document.userfrm.rpass.value;  
 var illegalChars = /[\W_]/;// allow only charactors and numbers  
     // Check if Password field is blank.  
     if(userpass == "" || ruserpass == ""){  
         alert("未输入密码 \n" + "请输入密码");  
         document.userfrm.pass.focus();  
     return false;  
     }  
     // Check if password length is less than 6 charactor.  
     if(userpass.length < 6){  
         alert("密码必须多于或等于 6 个字符。\n");  
         document.userfrm.pass.focus();  
     return false;  
     }  
     //check if password contain illigal charactors.  
     else if(illegalChars.test(userpass)){  
         alert("密码包含非法字符");  
         document.userfrm.pass.select();  
         return false;  
     }  
       
     else if(userpass != ruserpass){  
         alert("密码不符");  
         document.userfrm.rpass.select();  
         return false;  
     }  
     return true;  
 }  
   
 // Email Validation  
 function emailcheck(){  
 var usermail = document.userfrm.email.value;  
   
     if(usermail.length == "0"){  
     alert("Email 文本框为空")  
     document.userfrm.email.focus();  
     return false;  
     }  
     if( usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){  
       
       alert("Email 地址无效");  
       return false;  
     }  
     return true;  
 }  
   
 function bdaycheck(){  
 var bmonth = document.userfrm.bmon.value;  
 var bday = document.userfrm.bday.value;  
 var byear = document.userfrm.byear.value;  
 //alert(bmonth + "/" +  bday + "/" + byear);  
     if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){  
         alert("请输入您的生日");  
         document.userfrm.bmon.focus();  
         return false;  
     }  
       
     for(i=0; i<bday.length; i++){  
     var bnum = bday.substring(i,i+1)  
         if(!(bnum < 9 || bnum > 0)){  
         alert("生日无效");  
         document.userfrm.bday.focus();  
         return false;  
         }  
     }  
   
     for(j=0; j<byear.length; j++){  
     var bynum = byear.substring(j,j+1)  
         if(!(bynum < 9 || bynum > 0)){  
         alert("生日无效");  
         document.userfrm.byear.focus();  
         return false;  
         }  
     }  
      //验证出生年月日是否在指定的范围内  
    if (byear<1900||byear>2120){    
         alert("您输入的出生年份超出范围！\n请重新输入！");  
         document.userfrm.byear.focus();  
         return(false);  
             }  
         else   
             if(bmonth<0||bmonth>12){  
              alert("您输入的月份超出范围！\n请重新输入！");  
              document.userfrm.bmon.focus();  
              return(false);  
             }  
             else   
                 if(bday<0||bday>31){  
                  alert("您输入的日期超出范围!\n请重新输入！");  
                  return(false);  
                 }  
               
          return true;  
 }  
 //check sex  
 function genderCheck(){  
 var usergen = document.userfrm.gen.length;  
     for(i=0;i<usergen;i++){  
         if(document.userfrm.gen[i].checked){  
         return true;  
         }  
         if (i==usergen-1){  
         alert("请选择性别");  
         return false;  
         }  
     }  
     return true;  
 }  
 function agree( )  
 {  
    if (document.userfrm.okradio[0].checked==false)  
    {  
       alert("您必须同意淘宝网的协议！才能加入会员");  
       return false;  
    }  
    else  
       return true;  
 }  
 </SCRIPT>  
   
 <TABLE width="950" border="0" align="center">  
   <TR>  
     <TD height="75"><h4>注册步骤： 1.填写信息　&gt;　 2.收电子邮件　&gt;　3.注册成功 </h4></TD>  
     </TR>  
 </TABLE>  
   
 <TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">  
  <FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )">  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">名字：</TD>  
     <TD width="507" align="left" bordercolor="#E7E3E7"><INPUT name="fname" type="text" class="register_textBroader"    
   
  id="fname" size="24"></TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">姓氏：</TD>  
     <TD align="left" bordercolor="#E7E3E7"><INPUT name="lname" type="text" class="register_textBroader"  id="lname"   
   
 size="24"></TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160"  align="right" bgcolor="#E7FBFF">登录名：</TD>  
     <TD align="left" bordercolor="#E7E3E7"> <INPUT name="sname" type="text" class="register_textBroader"  id="sname"   
   
 size="24">  
 （可包含 a-z、0-9 和下划线）</TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">密码：</TD>  
     <TD align="left" bordercolor="#E7E3E7"> <INPUT name="pass" type="password" class="register_textBroader"    
   
 id="pass" size="26">  
 （至少包含 6 个字符） </TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</TD>  
     <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="rpass" type="password"   
   
 class="register_textBroader"  id="rpass" size="26"></TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</TD>  
     <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="email" type="text" class="register_textBroader"    
   
 id="email" size="24">（必须包含 @  字符）</TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">性别：</TD>  
     <TD align="left" bordercolor="#E7E3E7">  
         <INPUT name="gen" type="radio"   value="男" checked>  
          男&nbsp;   
         <INPUT name="gen" type="radio" value="女" class="input">       女  
     </TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">爱好：</TD>  
     <TD align="left" bordercolor="#E7E3E7">  
       <LABEL>  
         <INPUT type="checkbox" name="checkbox" value="checkbox">  
       </LABEL>  
           运动&nbsp;&nbsp;  
       <LABEL>  
       <INPUT type="checkbox" name="checkbox2" value="checkbox">  
       </LABEL>  
         聊天&nbsp;&nbsp;  
       <LABEL>  
         <INPUT type="checkbox" name="checkbox22" value="checkbox">  
       </LABEL>  
         玩游戏  
     </TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" align="right" bgcolor="#E7FBFF">出生日期：</TD>  
     <TD align="left" bordercolor="#E7E3E7">  
         <INPUT name="byear" class="register_textBroader"   id="byear" onFocus="this.value=''" value="yyyy"   
   
 size=4 maxLength=4 >&nbsp;年&nbsp&nbsp  
            <SELECT name="bmon"  >  
             <OPTION value="" selected>[选择月份]  
              <OPTION value=0>一月  
              <OPTION value=1>二月  
              <OPTION value=2>三月  
              <OPTION value=3>四月  
              <OPTION value=4>五月  
              <OPTION value=5>六月  
              <OPTION value=6>七月  
              <OPTION value=7>八月  
              <OPTION value=8>九月  
              <OPTION value=9>十月  
              <OPTION value=10>十一月  
              <OPTION value=11>十二月   
           </SELECT>&nbsp月&nbsp&nbsp;  
           <INPUT name="bday" class="register_textBroader" id="bday" onFocus="this.value=''" value="dd"   
   
 size=2 maxLength=2 >日   
     </TD>  
   </TR>  
   <TR class="register_table_line">  
     <TD width="160" height="35" align="right" bgcolor="#E7FBFF">  
         <INPUT type="reset" name="Reset" value=" 重   填 "></TD>  
     <TD height="35" align="left" bordercolor="#E7E3E7">  
         <INPUT type="submit" name="Button" value="同意以下服务条款，提交注册信息">  
     </TD>  
   </TR>  
   <TR>  
     <TD colspan="2"><TABLE width="760" border="0">  
       <TR>  
         <TD height="36">  
             <H4>阅读淘宝网服务协议 </H4>  
         </TD>  
       </TR>  
       <TR>  
         <TD height="120">  
             <TEXTAREA name="textarea" cols="80" rows="6">  
 欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。  
 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。   
 淘宝的权利和义务  
 1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。   
 2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。   
 3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提  
   
 供等处理，而无须征得用户的同意。   
 4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。     
           </TEXTAREA>  
         </TD>  
       </TR>  
     </TABLE></TD>  
   </TR>  
   </FORM>  
 </TABLE>  
 </div>  
 </body>  
 </html>  
 </span></span>  

2、正则表达式方式的验证方式【这个验证比较标准而且比较全面，不过也是通过点击提交按钮才进行验证】

本实例可以这样验证

也可以这样验证

具体代码

    Html代码   
    
  
 <span style="font-size: medium;"><span style="font-size: large;"><!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=gb2312" />  
 <title>表单验证类Validator v1</title>  
 <style>  
  body,td{font:normal 12px Verdana;color:#333333}  
  input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}  
  table{border-collapse:collapse;}  
  td{padding:3px}  
  input{height:20;}  
  textarea{width:80%;height:50px;overflow:auto;}  
  form{display:inline}  
  </style>  
 </head>  
 <body>  
 <table align="center">  
         <form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)">  
                 <tr>  
                         <td>身份证号：</td>  
                         <td><input name="Card" dataType="IdCard" msg="身份证号错误"></td>  
                 </tr>  
                 <tr>  
                         <td>真实姓名：</td>  
                         <td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>  
                 </tr>  
                 <tr>  
                         <td>ID：</td>  
                         <td><input name="username" dataType="Username" msg="ID名不符合规定"></td>  
                 </tr>  
                 <tr>  
                         <td>英文名：</td>  
                         <td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>  
                 </tr>  
                 <tr>  
                         <td>主页：</td>  
                         <td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>  
                 </tr>  
                 <tr>  
                         <td>密码：</td>  
                         <td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>  
                 </tr>  
                 <tr>  
                         <td>重复：</td>  
                         <td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>  
                 </tr>  
                 <tr>  
                         <td>信箱：</td>  
                         <td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>  
                 </tr>  
                 <tr>  
                         <td>信箱：</td>  
                         <td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>  
                 </tr>  
                 <tr>  
                         <td>QQ：</td>  
                         <td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>  
                 </tr>  
                 <tr>  
                         <td>身份证：</td>  
                         <td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>  
                 </tr>  
                 <tr>  
                         <td>年龄：</td>  
                         <td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>  
                 </tr>  
                 <tr>  
                         <td>年龄1：</td>  
                         <td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>  
                 </tr>  
                 <tr>  
                         <td>电话：</td>  
                         <td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>  
                 </tr>  
                 <tr>  
                         <td>手机：</td>  
                         <td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>  
                 </tr>  
                 <tr>  
                         <td>生日：</td>  
                         <td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>  
                 </tr>  
                 <tr>  
                         <td>邮政编码：</td>  
                         <td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>  
                 </tr>  
                 <tr>  
                         <td>邮政编码：</td>  
                         <td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>  
                 </tr>  
                 <tr>  
                         <td>操作系统：</td>  
                         <td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" >  
                                         <option value="">选择您所用的操作系统</option>  
                                         <option value="Win98">Win98</option>  
                                         <option value="Win2k">Win2k</option>  
                                         <option value="WinXP">WinXP</option>  
                                 </select></td>  
                 </tr>  
                 <tr>  
                         <td>所在省份：</td>  
                         <td>广东  
                                 <input name="Province" value="1" type="radio">  
                                 陕西  
                                 <input name="Province" value="2" type="radio">  
                                 浙江  
                                 <input name="Province" value="3" type="radio">  
                                 江西  
                                 <input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td>  
                 </tr>  
                 <tr>  
                         <td>爱好：</td>  
                         <td>运动  
                                 <input name="Favorite" value="1" type="checkbox">  
                                 上网  
                                 <input name="Favorite" value="2" type="checkbox">  
                                 听音乐  
                                 <input name="Favorite" value="3" type="checkbox">  
                                 看书  
                                 <input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>  
                 </tr>  
                 <td>自我介绍：</td>  
                 <td><textarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>  
                 </tr>  
                   
                 <td>自传：</td>  
                 <td><textarea name="History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>  
                 </tr>  
                   
                 <tr>  
                         <td>相片上传：</td>  
                         <td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td>  
                 </tr>  
                 <tr>  
                         <td colspan="2"><input name="Submit" type="submit" value="确定提交">  
                                 <input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button">  
                                 <input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button">  
                                 <input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>  
                 </tr>  
         </form>  
 </table>  
 <script>  
  Validator = {  
     Require : /.+/,  
     Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,  
     Phone : /^(( 
      
      \d2,3 
     )|(\d{3}\-))?( 
      
      0\d2,3 
     |0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,  
     Mobile : /^(( 
      
      \d2,3 
     )|(\d{3}\-))?13\d{9}$/,  
     Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,  
     IdCard : "this.IsIdCard(value)",  
     Currency : /^\d+(\.\d+)?$/,  
     Number : /^\d+$/,  
     Zip : /^[1-9]\d{5}$/,  
     QQ : /^[1-9]\d{4,8}$/,  
     Integer : /^[-\+]?\d+$/,  
     Double : /^[-\+]?\d+(\.\d+)?$/,  
     English : /^[A-Za-z]+$/,  
     Chinese :  /^[\u0391-\uFFE5]+$/,  
     Username : /^[a-z]\w{3,}$/i,  
    UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\. 
      
       
      
     
      
       
      
   
 \{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,  
     IsSafe : function(str){return !this.UnSafe.test(str);},  
     SafeString : "this.IsSafe(value)",  
     Filter : "this.DoFilter(value, getAttribute('accept'))",  
     Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",  
     LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",  
     Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",  
     Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",  
     Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",  
     Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",  
     Custom : "this.Exec(value, getAttribute('regexp'))",  
     Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",  
     ErrorItem : [document.forms[0]],  
     ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],  
     Validate : function(theForm, mode){  
         var obj = theForm || event.srcElement;  
         var count = obj.elements.length;  
         this.ErrorMessage.length = 1;  
         this.ErrorItem.length = 1;  
         this.ErrorItem[0] = obj;  
         for(var i=0;i<count;i++){  
             with(obj.elements[i]){  
                 var _dataType = getAttribute("dataType");  
                 if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;  
                 this.ClearState(obj.elements[i]);  
                 if(getAttribute("require") == "false" && value == "") continue;  
                 switch(_dataType){  
                     case "IdCard" :  
                     case "Date" :  
                     case "Repeat" :  
                     case "Range" :  
                     case "Compare" :  
                     case "Custom" :  
                     case "Group" :   
                     case "Limit" :  
                     case "LimitB" :  
                     case "SafeString" :  
                     case "Filter" :  
                         if(!eval(this[_dataType]))  {  
                             this.AddError(i, getAttribute("msg"));  
                         }  
                         break;  
                     default :  
                         if(!this[_dataType].test(value)){  
                             this.AddError(i, getAttribute("msg"));  
                         }  
                         break;  
                 }  
             }  
         }  
         if(this.ErrorMessage.length > 1){  
             modemode = mode || 1;  
             var errCount = this.ErrorItem.length;  
             switch(mode){  
             case 2 :  
                 for(var i=1;i<errCount;i++)  
                     this.ErrorItem[i].style.color = "red";  
             case 1 :  
                 alert(this.ErrorMessage.join("\n"));  
                 this.ErrorItem[1].focus();  
                 break;  
             case 3 :  
                 for(var i=1;i<errCount;i++){  
                 try{  
                     var span = document.createElement("SPAN");  
                     span.id = "__ErrorMessagePanel";  
                     span.style.color = "red";  
                     this.ErrorItem[i].parentNode.appendChild(span);  
                     span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");  
                     }  
                     catch(e){alert(e.description);}  
                 }  
                 this.ErrorItem[1].focus();  
                 break;  
             default :  
                 alert(this.ErrorMessage.join("\n"));  
                 break;  
             }  
             return false;  
         }  
         return true;  
     },  
     limit : function(len,min, max){  
         minmin = min || 0;  
         maxmax = max || Number.MAX_VALUE;  
         return min <= len && len <= max;  
     },  
     LenB : function(str){  
         return str.replace(/[^\x00-\xff]/g,"**").length;  
     },  
     ClearState : function(elem){  
         with(elem){  
             if(style.color == "red")  
                 style.color = "";  
             var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];  
             if(lastNode.id == "__ErrorMessagePanel")  
                 parentNode.removeChild(lastNode);  
         }  
     },  
     AddError : function(index, str){  
         this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];  
         this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;  
     },  
     Exec : function(op, reg){  
         return new RegExp(reg,"g").test(op);  
     },  
     compare : function(op1,operator,op2){  
         switch (operator) {  
             case "NotEqual":  
                 return (op1 != op2);  
             case "GreaterThan":  
                 return (op1 > op2);  
             case "GreaterThanEqual":  
                 return (op1 >= op2);  
             case "LessThan":  
                 return (op1 < op2);  
             case "LessThanEqual":  
                 return (op1 <= op2);  
             default:  
                 return (op1 == op2);              
         }  
     },  
     MustChecked : function(name, min, max){  
         var groups = document.getElementsByName(name);  
         var hasChecked = 0;  
         minmin = min || 1;  
         maxmax = max || groups.length;  
         for(var i=groups.length-1;i>=0;i--)  
             if(groups[i].checked) hasChecked++;  
         return min <= hasChecked && hasChecked <= max;  
     },  
     DoFilter : function(input, filter){  
 return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);  
     },  
     IsIdCard : function(number){  
         var date, Ai;  
         var verify = "10x98765432";  
         var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];  
         var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外'];  
         var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i);  
         if(re == null) return false;  
         if(re[1] >= area.length || area[re[1]] == "") return false;  
         if(re[2].length == 12){  
             Ai = number.substr(0, 17);  
             date = [re[9], re[10], re[11]].join("-");  
         }  
         else{  
             Ai = number.substr(0, 6) + "19" + number.substr(6);  
             date = ["19" + re[4], re[5], re[6]].join("-");  
         }  
         if(!this.IsDate(date, "ymd")) return false;  
         var sum = 0;  
         for(var i = 0;i<=16;i++){  
             sum += Ai.charAt(i) * Wi[i];  
         }  
         Ai +=  verify.charAt(sum%11);  
         return (number.length ==15 || number.length == 18 && number == Ai);  
     },  
     IsDate : function(op, formatString){  
         formatStringformatString = formatString || "ymd";  
         var m, year, month, day;  
         switch(formatString){  
             case "ymd" :  
                 m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));  
                 if(m == null ) return false;  
                 day = m[6];  
                 mmonth = m[5]*1;  
                 year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));  
                 break;  
             case "dmy" :  
                 m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));  
                 if(m == null ) return false;  
                 day = m[1];  
                 mmonth = m[3]*1;  
                 year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));  
                 break;  
             default :  
                 break;  
         }  
         if(!parseInt(month)) return false;  
         monthmonth = month==0 ?12:month;  
         var date = new Date(year, month-1, day);  
         return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());  
         function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}  
     }  
  }  
 </script>  
 </body>  
 </html></span></span>  

第三种验证，实际项目中比较常用的(JQuery+AJAX+MD5)，属于即时验证，亮点是验证用户是否存在的那一项

具体示例

registe.jsp

    Html代码   
    
  
 <span style="font-size: large;"><%@ page pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>  
 <!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>  
 <title>注册验证</title>  
 <script type="text/javascript" src="md5.js"></script>  
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
 <link type="text/css" rel="stylesheet" href="validator.css"></link>  
 <script src="formValidator.js" type="text/javascript" charset="UTF-8"></script>  
   
 <script type="text/javascript">  
 $(document).ready(function(){  
   $.formValidator.initConfig({formid:"myform",onerror:function(msg){alert(msg)},onsuccess:function(){  
         $('#pwd').val(MD5($('#pwd').val()));  
       return true;  
     }});  
     
   $("#loginname").formValidator({onshow:"请输入用户名",onfocus:"用户名至少3个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:3,max:10,onerror:"你输入的用户名非法,请确认"})  
    .ajaxValidator({  
        type : "post",  
         url : "account.do?"+Math.random(),  
         datatype : "text",  
         success : function(data){     
             if(data==1){  
                 return false;  
             } else{  
                 return true;  
              }  
         },  
         buttons: $("#lnbtn"),  
         error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},  
         onerror : "该用户名存在，请更换用户名",  
         oncorrect:"恭喜你,该用户名可用",  
         onwait : "正在对用户名进行合法性校验，请稍候..."  
     });  
   $("#pwd").formValidator({onshow:"请输入密码",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:3,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"});  
     $("#confirm_pwd").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"pwd",operateor:"=",onerror:"2次密码不一致,请确认"});  
     $("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,输入正确了才能离开焦点",oncorrect:"恭喜你,你输对了",defaultvalue:"@"}).inputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});  
 });  
   
 function submitForm(){  
     var pwd = document.getElementById('pwd');  
     pwd.value = MD5(pwd.value);  
     return true;  
 }  
 </script>  
 </head>  
 <body>  
 <!-- 页头结束 -->  
 <!--　广告栏开始 -->  
 <!--　广告栏结束 -->  
 <!-- 主内容开始 -->  
 <div id="content">  
     <!-- 注册栏开始 -->  
   <div class="longBar">  
     <div class="longTitle">注册新会员</div>  
     <div class="longBody">  
       <form id="myform" action="account.do?method=registe" method="post">  
             <table width="100%" border="0" cellspacing="5" cellpadding="5">  
         <tr>  
           <td width="23%" align="right"><span class="redStar">*</span>会员名：</td>  
           <td width="19%">  
             <input name="loginname" class="text" type="text" id="loginname" tabindex="1" size="30" maxlength="20" />  
             <input type="button" value="用户名是否可用" id="lnbtn"/>  
             </td>  
           <td width="58%"><div id="loginnameTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right"><span class="redStar">*</span>密码：</td>  
           <td><input name="pwd" class="text" type="password" id="pwd" tabindex="2" size="30" maxlength="20" /></td>  
           <td><div id="pwdTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right"><span class="redStar">*</span>重复密码：</td>  
           <td><input name="confirm_pwd" class="text" type="password" id="confirm_pwd" tabindex="3" size="30" maxlength="20" /></td>  
           <td><div id="confirm_pwdTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right"><span class="redStar">*</span>邮件地址：</td>  
           <td><input id="email" class="text" tabindex="4" name="email" size="30" type="text" /></td>  
           <td><div id="emailTip"></div></td>  
         </tr>  
         <tr>  
           <td colspan="3" align="right"><div align="center">-------------------------------- 以 下 为 选 填 项 目 ----------------------------------</div></td>  
           </tr>  
         <tr>  
           <td align="right">真实姓名：</td>  
           <td><input id="username" class="text" name="username" tabindex="5" size="30" type="text" /> </td>  
           <td><div id="usernameTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right">联系电话：</td>  
           <td><input id="phone" class="text" name="phone" tabindex="6" size="30" type="text" /> </td>  
           <td><div id="phoneTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right">手机号码：</td>  
           <td><input id="mobile" class="text" name="mobile" tabindex="7" size="30" type="text" /> </td>  
           <td><div id="mobileTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right">通讯地址：</td>  
           <td><input id="address" class="text" name="address" tabindex="9" size="35" type="text" /> </td>  
           <td><div id="addressTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right">邮政编码：</td>  
           <td><input id="zipCode" class="text" name="zipCode" tabindex="10" size="30" type="text" /> </td>  
           <td><div id="zipCodeTip"></div></td>  
         </tr>  
         <tr>  
           <td align="right"></td>  
           <td colspan="2"><input type="submit" class="submit" tabindex="11" value="提交注册"/></td>  
         </tr>  
       </table>  
       </form>  
     </div>  
   </div>  
   <!-- 注册栏结束 -->  
 </div>  
 <!-- 主内容结束 -->  
 <div class="hackBox"></div>  
   
 </body>  
 </html></span>  

AccountServlet.java

    Java代码   
    
  
 <span style="font-size: large;">package com.validator.test;  
   
 import java.io.IOException;  
 import java.io.PrintWriter;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 public class AccountServlet extends HttpServlet {  
   
   
     public void doGet(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
         this.doPost(request, response);  
   
     }  
     public void doPost(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
         String loginname=request.getParameter("loginname");  
         PrintWriter out = response.getWriter();  
         if(loginname.equals("abc123")){  
             out.println("1");  
         }else{  
             out.println("0");  
         }  
         out.flush();  
           
     }  
   
 }</span>  

yoloV

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
各种常用注册页面表单验证

这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是JQuery的验证，不过这么多验证方式接着第一个后面都会写出来的 1、最原始的注册验证方式，需要通过点击提交按钮才验证先上图具体代码 Html代码 span style="font-
复制链接

扫一扫

专栏目录