我佛山人"編寫的表單驗證類 Validator1.05使用說明

Validator表單驗證類使用說明

表單的驗證一直是網頁設計者頭痛的問題，我佛山人編寫的表單驗證類 Validator就是爲解決這個問題而寫的，旨在使設計者從紛繁複雜的表單驗證中解放出來，把精力集中於網頁的設計和功能上的改進上。Validator是基於JavaScript技術的僞靜態類和對象的自定義屬性，可以對網頁中的表單項輸入進行相應的驗證，允許同一頁面中同時驗證多個表單，熟悉接口之後也可以對特定的表單項甚至僅僅是某個字符串進行驗證。因爲是僞靜態類，所以在調用時不需要實例化，直接以"類名+.語法+屬性或方法名"來調用。此外，Validator還提供3種不同的錯誤提示模式，以滿足不同的需要。
Validator目前可實現的驗證類型有：
1.是否爲空；
2.中文字符；
3.雙字節字符
4.英文；
5.數字；
6.整數；
7.實數；
8.Email地址；
9.使用HTTP協議的網址；
10.電話號碼；
11.貨幣；
12.手機號碼；
13.郵政編碼；
14.身份證號碼(1.05增強)；
15.QQ號碼；
16.日期；
17.符合安全規則的密碼；
18.某項的重複值；
19.兩數的關係比較；
20.判斷輸入值是否在(n, m)區間；
21.輸入字符長度限制(可按字節比較)；
22.對於具有相同名稱的單選按鈕的選中判斷；
23.限制具有相同名稱的多選按鈕的選中數目；
24.自定義的正則表達式驗證；
25.文件上傳格式過濾(1.04新增)。

語法：accept="string"
類型：字符串。 可選。
說明：設定表單項輸入過濾，多用於type="file" 的上傳控件，以限制允許上傳的文件類型。該屬性僅當dataType屬性值爲Filter時起作用。

語法：dataType="Require | Chinese | English | Number | Integer | Double | Email | Url | Phone | Mobile | Currency | Zip | IdCard | QQ | Date | SafeString | Repeat | Compare | Range | Limit | LimitB | Group | Custom | Filter "

類型：字符串。必選。
說明：用於設定表單項的輸入數據驗證類型。
選值說明：
可選值 驗證功能
Require 必填項
Chinese 中文
English 英文

Number 數字
Integer 整數
Double 實數
Email    Email地址格式
Url    基於HTTP協議的網址格式
Phone    電話號碼格式
Mobile 手機號碼格式
Currency 貨幣格式
Zip    郵政編碼
IdCard    身份證號碼
QQ    Q號碼
Date    日期
SafeString 安全密碼
Repeat    重複輸入
Compare 關係比較
Range    輸入範圍
Limit    限制輸入長度
LimitB    限制輸入的字節長度
Group    驗證單/多選按鈕組
Custom 自定義正則表達式驗證
Filter    設置過濾，用於限制文件上傳

驗證表單
在表單中加上onsubmit事件，觸發調用Validaotor的Validate方法，代碼示例：
<form onSubmit="return Validator.Validate(this,3)" action="your_application_page" method="post">
... ...
</form>
Validate方法有兩個可選參數，第一個爲表單對象，如果是寫在表單的onsubmit事件中，可以用this指代當前表單，默認值爲事件源對象；第二個參數爲錯誤提示模式，可選值爲1,2和3，默認值爲1。省略第二個參數時相當於使用Validate(objForm,1)，省略第一個參數時相當於Validate(this,1)。注意，不可以省略第一個參數而只寫第二個參數，Validate(,2)是錯誤的用法。

驗證輸入是否Email地址
代碼示例：
<input name="Email" dataType="Email" msg="信箱格式不正確">
或

<input name="Email" dataType="Custom" regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正確">

Validator的必要屬性是dataType和msg(區分大小寫)，然後根據dataType值的不同，會引發出不同的屬性。因爲程序中已經集成Email地址格式的正則，所以可以直接用dateType="Email"進行驗證，如果對Email地址的格式有不同的限制，可以用自定義的正則來驗證(參考第二段代碼)。

驗證下拉菜單是否選中
代碼示例：
<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>
注意，對於IE，在option中沒寫value屬性時IE的解釋引擎將自動設置其值爲空，而Firefox時將自動設置其值爲text屬性址。例如，在示例代碼中如果第一個option不寫value屬性，IE中將得到value爲空，而Firefox爲"選擇您所用的操作系統"。

驗證是否選中單選按鈕組中的一個
代碼示例：
廣東<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="必須選定一個省份" >
對於單/多選按鈕組的驗證，dataType屬性都爲Group，然後只需在按鈕組的最後一個寫上dataType和msg屬性。
注意，要成爲單/多選按鈕組，它們必須具有相同的name屬性值。

限制多選按鈕組的選中個數
代碼示例：
運動<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種愛好">
要限制多選按鈕組的選中個數，必須設置min和max屬性。min屬性用於設定選中個數的下限，max爲上限，默認時min爲1，max爲多選按鈕組的個數。

<table align="center">
<form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,3)">
<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 v1.05
code by 我佛山人
[email protected]
*************************************************/
Validator = {
Require : /.+/,
Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
Mobile : /^((\(\d{2,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){
    mode = 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){
   min = min || 0;
   max = 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;
   min = min || 1;
   max = 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){
   formatString = 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];
     month = 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];
     month = m[3]*1;
     year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
     break;
    default :
     break;
   }
   if(!parseInt(month)) return false;
   month = 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>