強效、方便的表單通用檢測JS 不錯

2019-11-21 02:21:17

字體：大中小

來源：轉載

供稿：網友

<!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" /> <script language="javascript"> // 表單通用檢測JS by www.it2048.com 整理/制作 H.Q.J 2007/1/10 //自定義屬性解釋(IE支持): //ii_chname：表示該數據的中文名稱 //ii_minsize:表示允許輸入的最小長度,單位字節 //ii_maxsize：表示允許輸入的最大長度,單位字節 //ii_type:輸入的數據類型 //ii_null：表示輸入值是否允許為空。為yes時允許為空。 //ii_compare:比交是否與某項(ID)值相同 function chkRadio(o){         //判斷單選         for (i=0;i<o.length;i++){         if (o[i].checked) return true;         }         return false; }  function strlen(str){         /* 取得字符串的字節長度 */         var i;         var len;         len = 0;         for (i=0;i<str.length;i++)         {         if (str.charCodeAt(i)>255) len+=2; else len++;         }         return len; } function isnull(str){ /* 檢測字符串是否為空 */         var i;          for (i=0;i<str.length;i++)         {           if (str.charAt(i)!=' ') return false;         }          return true; } function isNum(s) {         /* 檢測字符串是否為數字 */         var regu = "^[-+]?/d*$";//支持正負/小數         //var regu = "^([0-9]*)$";         //var regu = "^([0-9]*[.0-9])$"; // 小數測試         var re   = new RegExp(regu);         if (s.search(re) != -1)                 return true;         else                 return false; } function isType(s,t){ /* 檢測數據類型是否合法 */         var RegExpPtn;         var t2=t;         if (t2 != ""){                 switch(s){                         case "EN"://英文                                 RegExpPtn=/^[A-Za-z]+$/;                                 if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "CN"://中文                                 RegExpPtn=/^[/u4e00-/u9fa5]+$/;                                 if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "NUM"://實數                                 RegExpPtn=/^(/+|-)?/d+($|/./d+$)/;                                 if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "INT"://正整數                                 RegExpPtn=/^[1-9]d*$/;                                 if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "DATE"://日期yyyy-mm-dd                                 RegExpPtn=/^((((1[6-9]|[2-9]/d)/d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]/d|3[01]))|(((1[6-9]|[2-9]/d)/d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]/d|30))|(((1[6-9]|[2-9]/d)/d{2})-0?2-(0?[1-9]|1/d|2[0-8]))|(((1[6-9]|[2-9]/d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/;                                 if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "EMAIL"://郵件                                 RegExpPtn=//w[/w.-]+@[/w-]+(/./w{2,})+/gi;                                 if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "CARD"://身份證,也可直接調用isCard()函數                                 return isCard(t2)                                                                 break;                         case "URL"://網址                                 RegExpPtn=/^[a-zA-z]+/:////(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$/;                                   if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "IP"://IP地址,,也可直接調用isIP()函數                                 return isIP(t2)                                                                 break;                         case "ID1"://ID類型1,充許英文+數字+下劃線(0~30字節)                                 RegExpPtn=/^[a-zA-Z][a-zA-Z0-9_]{0,29}$/;                                   if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                         case "ID2"://ID類型1,充許中文+英文+數字+下劃線(0~30字節)                                 RegExpPtn=/^[a-zA-Z][a-zA-Z0-9_][_0-9a-zA-Z/u4e00-/u9fa5]{0,29}$/;                                   if (!RegExpPtn.test(t2) ){return false;}else{return true;}                                 break;                                                          default : break;                 }         }else{                 return false;                 } } function isCard(obj){          /*功能：驗證身份證號碼是否有效 */      var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"內蒙古",21:"遼寧",22:"吉林",23:"黑龍江",31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"云南",54:"西藏",61:"陜西",62:"甘肅",63:"青海",64:"寧夏",65:"新疆",71:"臺灣",81:"香港",82:"澳門",91:"國外"};               var iSum = 0;         var info = "";         var strIDno = obj;         var idCardLength = strIDno.length;           if(!/^/d{17}(/d|x)$/i.test(strIDno)&&!/^/d{15}$/i.test(strIDno))          {             //alert("非法身份證號");             return false;         }               //在后面的運算中x相當于數字10,所以轉換成a         strIDno = strIDno.replace(/x$/i,"a");             if(aCity[parseInt(strIDno.substr(0,2))]==null)         {             //alert("非法地區");             return false;         }                  if (idCardLength==18)         {             sBirthday=strIDno.substr(6,4)+"-"+Number(strIDno.substr(10,2))+"-"+Number(strIDno.substr(12,2));             var d = new Date(sBirthday.replace(/-/g,"/"))             if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))             {                        //alert("非法生日");                 return false;             }                 for(var i = 17;i>=0;i --)                 iSum += (Math.pow(2,i) % 11) * parseInt(strIDno.charAt(17 - i),11);                 if(iSum%11!=1)             {                 //alert("非法身份證號");                 return false;             }         }         else if (idCardLength==15)         {             sBirthday = "19" + strIDno.substr(6,2) + "-" + Number(strIDno.substr(8,2)) + "-" + Number(strIDno.substr(10,2));             var d = new Date(sBirthday.replace(/-/g,"/"))             var dd = d.getFullYear().toString() + "-" + (d.getMonth()+1) + "-" + d.getDate();                if(sBirthday != dd)             {                //alert("非法生日");                 return false;             }         }         return true;      }   function isIP(obj)      {          var re=/^(/d+)/.(/d+)/.(/d+)/.(/d+)$/; //IP正則         if(re.test( obj ))         {             if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;         }         //alert("請輸入合法的計算機IP地址");         return false;      }   function verifyInput(input) {//檢測指定自定義元素         var i;         var msg="";         var error = false;         var v=input.value;         if((input.ii_null != undefined)&&(input.ii_null != "")&&(error==false)){                 if (input.ii_null=="NO"&&isnull(v))                 {                         //為空校驗                         msg +="*"+input.ii_chname+"值不能為空/n";                         error = true;                 }         }                           if((input.ii_type != undefined)&&(input.ii_type != "")&&(error==false)){                 //檢查類型                 switch(input.ii_type){                         case "EN":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"只能輸入英文字符/n";                                         error = true;                                 }                                 break;                         case "CN":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"只能輸入中文字符/n";                                         error = true;                                 }                                 break;                         case "NUM":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"值應該全為數字/n";                                         error = true;                                 }                                 break;                         case "INT":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"只能輸入整數/n";                                         error = true;                                 }                                 break;                         case "DATE":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤(參考:2000-12-28)/n";                                         error = true;                                 }                                 break;                         case "EMAIL":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤(參考:abc@163.com)/n";                                         error = true;                                 }                                 break;                         case "CARD":                                 if(isCard(v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤,請檢查/n";                                         error = true;                                 }                                 break;                         case "URL":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤(參考:http://www.xxxx.com)/n";                                         error = true;                                 }                                 break;                         case "IP":                                 if(isIP(v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤,請檢查/n";                                         error = true;                                 }                                 break;                         case "ID1":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤(允許輸入字母、數字和下劃線)/n";                                         error = true;                                 }                                 break;                         case "ID2":                                 if (isType(input.ii_type,v)==false){                                         msg +="*"+input.ii_chname+"填寫錯誤(允許輸入中文、字母、數字和下劃線)/n";                                         error = true;                                 }                                 break;                                                  default : break;                 }                          }                  if((input.ii_minsize != undefined)&&(input.ii_minsize != "")&&(error==false)){                 if (strlen(v)<parseInt(input.ii_minsize))                 {                         //最小長度校驗                         msg +="*"+input.ii_chname+"內容太短(最少需"+input.ii_minsize+"個字節)/n";                         error = true;                 }         }                  if((input.ii_maxsize != undefined)&&(input.ii_maxsize != "")&&(error==false)){                 if (strlen(v)>parseInt(input.ii_maxsize))                 {                         //最大長度校驗                         msg +="*"+input.ii_chname+"超出最大長度("+input.ii_maxsize+"個字節)/n";                         error = true;                 }         }                  if((input.ii_compare != undefined)&&(error==false)){                 var chv=document.getElementById(input.ii_compare).value;                 if ((chv != undefined)&&(chv != ""))                 {                         if(chv != v){                                 msg +="*"+input.ii_chname+"與"+document.getElementById(input.ii_compare).ii_chname+"內容不相符，請檢查/n";                                 error = true;                         }                 }         }                  if(error) alert(msg);         return error; } function chkFromAll(myform) {        //檢測所有自定義元素         var i;         for (i=0;i<myform.elements.length;i++)         {                 if (myform.elements[i].ii_chname==undefined) continue;//跳過非自定義元素                 if (verifyInput(myform.elements[i])==true)//檢測當前元素                         {                                 myform.elements[i].focus();                                 return false;                         }         }         return true; } </script> <title>無標題文檔</title> <style type="text/css">  </style></head> <body> <table width="80%" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">   <tr>     <td height="100" valign="top" bgcolor="#FFFFFF">JS通用表單Input檢測塊(IE支持)       通過自定義每一個Input的六個新屬性(可省略任意個)       //自定義屬性解釋(IE支持):       //ii_chname：表示該數據的中文名稱       //ii_minsize:表示允許輸入的最小長度,單位字節       //ii_maxsize：表示允許輸入的最大長度,單位字節       //ii_type:限制輸入的數據類型，有                   EN(英文),CN(中文),NUM(實數),INT(整數),DATE(短日期),EMAIL(郵件)                   CARD(身份證),URL(網址),IP(IP地址),ID1(英文帳號),ID2(中英文帳號)       //ii_null：表示輸入值是否允許為空。為yes時允許為空。     //ii_compare:比交是否與某項(ID)值相同          然后有二種檢測方式，     一是在Input里直接加入onBlur="verifyInput(this);" 事件，可即時檢測提示     二是在Form中onsubmit="return chkFromAll(this);"，提交才檢測          使用可以直接本頁內script部份另存為Form_Common.js包含就可以用，解決絕大部份表單檢測     問題，與后臺編程語言無關，加快后臺程序編寫效率，讓你我更專注于后臺編寫 :)      由于眾所周知的原因，FF等貌似不支持自定義屬性，暫無解決方法(鄙視一下)。要想兼容可以自     寫chkfrom函數利用document.getElementById('ID')和JS文件內函數來檢測，也會加快效率     這只是我的web程序設計增效工具(Eff.Studio)的一部份，有朋友需要的話遲點我會公開由表直接自動生成表單工具、自動建立后臺(含增加、列表、編輯、刪除)的Class(因工作需要，暫只做ASP版)     將大大加快設計效率~~~支持啦~(支持轉載，拷貝不究，懇留作者信息)</td>   </tr> </table>                        <span id="iwvjtn8m0"    class="STYLE1">演示表單：</span>              <form id="form1" name="form1" method="post" action="Demo.html" onsubmit="return chkFromAll(this);">       <table width="80%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">         <tr>           <td width="20%" height="25" align="right" bgcolor="#FFFFFF"><span id="iwvjtn8m0"    class="STYLE1">*</span>注冊帳號：</td>           <td bgcolor="#FFFFFF"><label>             <input name="n1" type="text" id="n1" size="20" maxlength="16" onBlur="verifyInput(this);" ii_chname="注冊帳號" ii_minsize="4" ii_maxsize="16" ii_type="ID1" ii_null="NO" />           (帳號只能由英文、數字和下劃線組成,5-16個字符)</label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF"><span id="iwvjtn8m0"    class="STYLE1">*</span>登陸密碼：</td>           <td bgcolor="#FFFFFF"><label>             <input name="n2" type="text" id="n2" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="登陸密碼" ii_maxsize="50" ii_null="NO" />           </label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF"><span id="iwvjtn8m0"    class="STYLE1">*</span>重復密碼：</td>           <td bgcolor="#FFFFFF"><label>             <input name="n3" type="text" id="n3" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="重復密碼" ii_maxsize="50" ii_null="NO" ii_compare="n2" />           </label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF"><span id="iwvjtn8m0"    class="STYLE1">*</span>真實姓名：</td>           <td bgcolor="#FFFFFF"><label>             <input name="n4" type="text" id="n4" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="真實姓名" ii_maxsize="50" ii_type="CN" ii_null="NO" />           (只能為中文)</label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF"><span id="iwvjtn8m0"    class="STYLE1">*</span>聯系郵件：</td>           <td bgcolor="#FFFFFF"><label>             <input name="mail" type="text" id="mail" size="20" maxlength="50" />           </label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF"><span id="iwvjtn8m0"    class="STYLE1">*</span>聯系QQ：</td>           <td bgcolor="#FFFFFF"><label>             <input name="n5" type="text" id="n5" size="20" maxlength="50" onBlur="verifyInput(this);" ii_chname="聯系QQ" ii_maxsize="50" ii_type="NUM" ii_null="NO" />           (只能為數字)</label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF">聯系地址：</td>           <td bgcolor="#FFFFFF"><label>             <input name="n6" type="text" id="n6" size="30" maxlength="50"/>           </label></td>         </tr>         <tr>           <td height="25" align="right" bgcolor="#FFFFFF">自我簡介：</td>           <td bgcolor="#FFFFFF"><label>             <textarea name="n7" cols="50" rows="8" id="n7" onBlur="verifyInput(this);" ii_chname="自我簡介" ii_maxsize="200"></textarea>           (最多100個字)</label></td>         </tr>         <tr>           <td height="35" align="right" bgcolor="#FFFFFF"> </td>           <td bgcolor="#FFFFFF"><label>             <input type="submit" name="Submit" value=" 提交 " />             <input type="reset" name="Submit2" value=" 重置 " />           </label></td>         </tr>       </table> </form> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：個人總結的一些關于String、Function、Array的屬性和用法

下一篇：記錄滾動條位置（使用userdate）