方便的表單通用檢測javascript

</div>
        <div class="lbd clearfix" id="bdctop"><script type="text/javascript">dy("art_up")</script></div>
        <div id="content">
<div class="htmlarea"><TEXTAREA id="runcode97095">
<!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"> 
//自定義屬性解釋(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+"填寫錯誤(參考:[email protected])\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"> 
<!-- 
body,td,th { 
        font-size: 13px; 
        color: #666666; 
} 
.STYLE1 {color: #FF0000} 
--> 
</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中οnsubmit="return chkFromAll(this);",提交才檢測
 
    
 
    使用可以直接本頁內script部份另存爲Form_Common.js包含就可以用,解決絕大部份表單檢測
 
    問題,與後臺編程語言無關,加快後臺程序編寫效率,讓你我更專注於後臺編寫 :) 
 
    由於衆所周知的原因,FF等貌似不支持自定義屬性,暫無解決方法(鄙視一下)。要想兼容可以自
 
    寫chkfrom函數利用document.getElementById('ID')和JS文件內函數來檢測,也會加快效率
 
    這只是我的web程序設計增效工具(Eff.Studio)的一部份,有朋友需要的話遲點我會公開由表直接自動生成表單工具、自動建立後臺(含增加、列表、編輯、刪除)的Class(因工作需要,暫只做ASP版) 
    將大大加快設計效率~~~支持啦~(支持轉載,拷貝不究,懇留作者信息)</td> 
  </tr> 
</table> 

 

 
                     <span class="STYLE1">演示表單:</span>
 
        
 
    <form id="form1" name="form1" method="post" action="Demo.html" οnsubmit="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 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 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 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 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 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 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"><&#47textarea> 
          (最多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>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章