首页 > 代码库 > 简单的js表单验证框架

简单的js表单验证框架

2024-07-18 12:51:40   223人阅读

  1. /** 
  2.  * 通常在我们的HTML页面表单中有大量的数据验证工作， 
  3.  * 免不了要写很多验证表单的js代码，这是一项非常繁琐 
  4.  * 枯燥的工作。很多程序员也会经常遗漏这项工作。当然 
  5.  * 一些JavaEE框架中有一些比较好的验证框架提供给我们 
  6.  * 使用，但是也是需要很多繁琐的配置，页面查看起来也 
  7.  * 不是很方便。一般程序员使用的也不多。所以写了这一 
  8.  * 段JavaScript代码提供给大家使用。算是一个简单的 
  9.  * JavaScript验证框架吧。使用起来很简单，配合下面几 
  10.  * 种标签使用，能实现大多数表单验证。 
  11.  * 1.验证输入框类，包括，text,textarea,password,hidden等 
  12.  * <textValidate  
  13.  *      field="username" //对应待验证的输入框name属性 
  14.  *      lableText="用户名" //验证未通过时提示名称 
  15.  *      altText="用户名必须是数字，字母，下划线，长度在5-10之间"  
  16.  *      //验证未通过时的提示文字，可不设置，不设置该属性时使用lableText属性提示 
  17.  *      isValidate="false" //是否验证 
  18.  *      min="5" //最小长度 
  19.  *      max="10" //最大长度 
  20.  *      dataType="account"> //数据类型，可选值：string(字符串), 
  21.  *          int(整数),email,account(只能是数字，字母，下划线), 
  22.  *          phone(国内电话号码),postcode(国内邮政编码),code(国内身份证号码), 
  23.  *          ip(电脑IP地址),正则表达式字符串 
  24.  * 2.验证单选和复选框是否必选，包括，radio,checkbox等 
  25.  * <radioValidate  
  26.  *      field="sex"  
  27.  *      altText="" 
  28.  *      lableText="性别"  
  29.  *      isValidate="false"> 
  30.  * 3.验证下拉框是否必选，包括，select等 
  31.  * <selectValidate  
  32.  *      field="city"  
  33.  *      altText="" 
  34.  *      lableText="所在城市"  
  35.  *      isValidate="true"  
  36.  *      noValue="http://www.mamicode.com/-1"> //下拉框不选择时的默认值 
  37.  * Author：BluesLee <br> 
  38.  * CreateDate：2009-8-7 <br> 
  39.  * Modifier：BluesLee <br> 
  40.  * ModifyDate：2009-8-10 <br> 
  41.  * Version:1.0<br> 
  42.  * Copyright(c)2009 深蓝工作室<br> 
  43.  * All right reserved.<br> 
  44.  * 
  45.  */  
  46.  /** 
  47.   * 表单数据验证<br> 
  48.   * Author：BluesLee <br> 
  49.   * CreateDate：2009-8-7 <br> 
  50.   * Modifier：BluesLee <br> 
  51.   * ModifyDate：2009-8-10 <br> 
  52.   * Version:1.0<br> 
  53.   *  
  54.   * @param frm,待验证的表单对象 
  55.   * @return 验证通过返回true,验证失败返回false 
  56.   */  
  57. function validate(frm){  
  58.     var textValidate=frm.getElementsByTagName("textValidate");  
  59.     for(var i=0;i<textValidate.length;i++){  
  60.         var isValidate=textValidate[i].getAttribute("isValidate");  
  61.         if(isValidate=="false") {  
  62.             continue;  
  63.         }  
  64.         var lable=textValidate[i].getAttribute("lableText");  
  65.         var min=textValidate[i].getAttribute("min");  
  66.         var max=textValidate[i].getAttribute("max");  
  67.         var datatype=textValidate[i].getAttribute("dataType");  
  68.         var alt=textValidate[i].getAttribute("altText");  
  69.         var field=document.getElementsByName(textValidate[i].getAttribute("field"))[0];  
  70.         if(min && min.length>0 && field.value.length<min){  
  71.             if(alt && alt.length>0){  
  72.                 alert(alt);  
  73.             }else{  
  74.                 alert(lable+"不能小于"+min+"位！");  
  75.             }  
  76.             if(field.select)field.select();  
  77.             field.focus();  
  78.             return false;  
  79.         }  
  80.         if(max && max.length>0 && field.value.replace(/[^x00-xff]/g,"aa").length>max){  
  81.             if(alt && alt.length>0){  
  82.                 alert(alt);  
  83.             }else{  
  84.                 alert(lable+"不能大于"+max+"位！");  
  85.             }  
  86.             if(field.select)field.select();  
  87.             field.focus();  
  88.             return false;  
  89.         }  
  90.         if(datatype && datatype.length>0){  
  91.             if(datatype=="int"){  
  92.                 if(!/^[0-9]+$/g.test(field.value)){  
  93.                     if(field.select)field.select();  
  94.                     field.focus();  
  95.                     if(alt && alt.length>0){  
  96.                         alert(alt);  
  97.                     }else{  
  98.                         alert(lable+"只能输入整数！");  
  99.                     }  
  100.                     return false;  
  101.                 }  
  102.             }else if(datatype=="email"){  
  103.                 if(!/^([a-zA-Z0-9_/-/./+]+)@((/[[0-9]{1,3}/.[0-9]{1,3}/.[0-9]{1,3}/.)|(([a-zA-Z0-9/-]+/.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(/]?)$/g.test(field.value)){  
  104.                     if(field.select)field.select();  
  105.                     field.focus();  
  106.                     if(alt && alt.length>0){  
  107.                         alert(alt);  
  108.                     }else{  
  109.                         alert("Email格式不正确！");  
  110.                     }  
  111.                     return false;  
  112.                 }  
  113.             }else if(datatype=="account"){  
  114.                 if(!/^[a-zA-Z0-9_]+$/g.test(field.value)){  
  115.                     if(field.select)field.select();  
  116.                     field.focus();  
  117.                     if(alt && alt.length>0){  
  118.                         alert(alt);  
  119.                     }else{  
  120.                         alert(lable+"只能是数字，字母和下划线！");  
  121.                     }  
  122.                     return false;  
  123.                 }  
  124.             }else if(datatype=="phone"){  
  125.                 if(!/^d{3}-d{8}|d{4}-d{7}$/g.test(field.value)){  
  126.                     if(field.select)field.select();  
  127.                     field.focus();  
  128.                     if(alt && alt.length>0){  
  129.                         alert(alt);  
  130.                     }else{  
  131.                         alert("电话号码格式不正确，正确格式：0511-4405222 或 021-87888822");  
  132.                     }  
  133.                     return false;  
  134.                 }  
  135.             }else if(datatype=="postcode"){  
  136.                 if(!/^[1-9]d{5}(?!d)$/g.test(field.value)){  
  137.                     if(field.select)field.select();  
  138.                     field.focus();  
  139.                     if(alt && alt.length>0){  
  140.                         alert(alt);  
  141.                     }else{  
  142.                         alert("邮政编码不正确");  
  143.                     }  
  144.                     return false;  
  145.                 }  
  146.             }else if(datatype=="code"){  
  147.                 if(!/^d{15}|d{18}$/g.test(field.value)){  
  148.                     if(field.select)field.select();  
  149.                     field.focus();  
  150.                     if(alt && alt.length>0){  
  151.                         alert(alt);  
  152.                     }else{  
  153.                         alert("身份证号码不正确");  
  154.                     }  
  155.                     return false;  
  156.                 }  
  157.             }else if(datatype=="ip"){  
  158.                 if(!/^(((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))/.){3}((1?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/g.test(field.value)){  
  159.                     if(field.select)field.select();  
  160.                     field.focus();  
  161.                     if(alt && alt.length>0){  
  162.                         alert(alt);  
  163.                     }else{  
  164.                         alert("IP地址格式不正确");  
  165.                     }  
  166.                     return false;  
  167.                 }  
  168.             }else{  
  169.                 if(!new RegExp(datatype,"g").test(field.value)){  
  170.                     if(field.select)field.select();  
  171.                     field.focus();  
  172.                     if(alt && alt.length>0){  
  173.                         alert(alt);  
  174.                     }else{  
  175.                         alert(lable+"输入格式不正确！");  
  176.                     }  
  177.                     return false;  
  178.                 }  
  179.             }  
  180.         }  
  181.     }  
  182.     var radioValidate=frm.getElementsByTagName("radioValidate");  
  183.     for(var i=0;i<radioValidate.length;i++){  
  184.         var isValidate=radioValidate[i].getAttribute("isValidate");  
  185.         if(isValidate=="false") {  
  186.             continue;  
  187.         }  
  188.         var lable=radioValidate[i].getAttribute("lableText");  
  189.         var alt=textValidate[i].getAttribute("altText");  
  190.         var field=document.getElementsByName(radioValidate[i].getAttribute("field"));  
  191.         var flag=true;  
  192.         for(var j=0;j<field.length;j++){  
  193.             if(field[j].checked){  
  194.                 flag=false;  
  195.                 break;  
  196.             }  
  197.         }  
  198.         if(flag){  
  199.             if(alt && alt.length>0){  
  200.                 alert(alt);  
  201.             }else{  
  202.                 alert(lable+"为必选项！");  
  203.             }  
  204.             return false;  
  205.         }  
  206.     }  
  207.     var selectValidate=frm.getElementsByTagName("selectValidate");  
  208.     for(var i=0;i<selectValidate.length;i++){  
  209.         var isValidate=selectValidate[i].getAttribute("isValidate");  
  210.         if(isValidate=="false") {  
  211.             continue;  
  212.         }  
  213.         var lable=selectValidate[i].getAttribute("lableText");  
  214.         var alt=textValidate[i].getAttribute("altText");  
  215.         var noValue=http://www.mamicode.com/selectValidate[i].getAttribute("noValue");  
  216.         var field=document.getElementsByName(selectValidate[i].getAttribute("field"))[0];  
  217.         if(field.value=http://www.mamicode.com/=noValue){
  218.             if(alt && alt.length>0){  
  219.                 alert(alt);  
  220.             }else{  
  221.                 alert(lable+"为必选项！");  
  222.             }  
  223.             return false;  
  224.         }  
  225.     }  
  226.     return true;  
  227. } 

 

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  • <HTML>  
  •  <HEAD>  
  •   <TITLE> New Document </TITLE>  
  •   <META NAME="Generator" CONTENT="EditPlus">  
  •   <META NAME="Author" CONTENT="">  
  •   <META NAME="Keywords" CONTENT="">  
  •   <META NAME="Description" CONTENT="">  
  •   <mce:script language="JavaScript" src=http://www.mamicode.com/"validate.js" mce_src=http://www.mamicode.com/"validate.js"></mce:script>  
  •  </HEAD>  
  •   
  •  <BODY>  
  •   <form onsubmit="return validate(this);">  
  •     <textValidate field="username" lableText="用户名" isValidate="false" min="5" max="10" dataType="account">  
  •     用户名  
  •     <input name="username" type="text"><br>  
  •     <textValidate field="password" lableText="密码" isValidate="false" min="6" dataType="^[a-zA-Z0-9_]+$">  
  •     密码  
  •     <input name="password" type="password"><br>  
  •     <textValidate field="email" lableText="Email" isValidate="false" dataType="email">  
  •     Email  
  •     <input name="email" type="text"><br>  
  •     <radioValidate field="sex" lableText="性别" isValidate="true">  
  •     性别  
  •     <input name="sex" type="radio">男  
  •     <input name="sex" type="radio">女<br>  
  •     <radioValidate field="hunyin" lableText="婚姻状况" isValidate="true">  
  •     婚姻状况  
  •     <input name="hunyin" type="radio">已婚  
  •     <input name="hunyin" type="radio">未婚<br>  
  •     兴趣爱好  
  •     <radioValidate field="love" lableText="兴趣爱好" isValidate="true">  
  •     <input name="love" type="checkbox">篮球  
  •     <input name="love" type="checkbox">足球<br>  
  •     所在城市  
  •     <selectValidate field="city" lableText="所在城市" isValidate="true" noValue=http://www.mamicode.com/"-1">  
  •     <select name="city">  
  •         <option value=http://www.mamicode.com/"-1">请选择...</option>  
  •         <option value=http://www.mamicode.com/"上海">上海</option>  
  •         <option value=http://www.mamicode.com/"北京">北京</option>  
  •         <option value=http://www.mamicode.com/"西安">西安</option>  
  •     </select>  
  •     <input type="submit">  
  • </form>  
  •  </BODY>  
  • </HTML>

 


联系
我们