Validator.js 很好用的客户端表单验证
1: /*************************************************
2: Validator v1.05
3: code by 我佛山人
4: wfsr@msn.com
5: *************************************************/
6: Validator = {
7: Require : /.+/,
8: Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
9: Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
10: Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
11: Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
12: IdCard : "this.IsIdCard(value)",
13: Currency : /^\d+(\.\d+)?$/,
14: Number : /^\d+$/,
15: Zip : /^[1-9]\d{5}$/,
16: QQ : /^[1-9]\d{4,8}$/,
17: Integer : /^[-\+]?\d+$/,
18: Double : /^[-\+]?\d+(\.\d+)?$/,
19: English : /^[A-Za-z]+$/,
20: Chinese : /^[\u0391-\uFFE5]+$/,
21: Username : /^[a-z]\w{3,}$/i,
22: UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
23: IsSafe : function(str){return !this.UnSafe.test(str);},
24: SafeString : "this.IsSafe(value)",
25: Filter : "this.DoFilter(value, getAttribute('accept'))",
26: Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
27: LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
28: Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
29: Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
30: Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
31: Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
32: Custom : "this.Exec(value, getAttribute('regexp'))",
33: Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
34: ErrorItem : [document.forms[0]],
35: ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
36: Validate : function(theForm, mode){
37: var obj = theForm || event.srcElement;
38: var count = obj.elements.length;
39: this.ErrorMessage.length = 1;
40: this.ErrorItem.length = 1;
41: this.ErrorItem[0] = obj;
42: for(var i=0;i<count;i++){
43: with(obj.elements[i]){
44: var _dataType = getAttribute("dataType");
45: if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
46: this.ClearState(obj.elements[i]);
47: if(getAttribute("require") == "false" && value == "") continue;
48: switch(_dataType){
49: case "IdCard" :
50: case "Date" :
51: case "Repeat" :
52: case "Range" :
53: case "Compare" :
54: case "Custom" :
55: case "Group" :
56: case "Limit" :
57: case "LimitB" :
58: case "SafeString" :
59: case "Filter" :
60: if(!eval(this[_dataType])) {
61: this.AddError(i, getAttribute("msg"));
62: }
63: break;
64: default :
65: if(!this[_dataType].test(value)){
66: this.AddError(i, getAttribute("msg"));
67: }
68: break;
69: }
70: }
71: }
72: if(this.ErrorMessage.length > 1){
73: mode = mode || 1;
74: var errCount = this.ErrorItem.length;
75: switch(mode){
76: case 2 :
77: for(var i=1;i<errCount;i++)
78: this.ErrorItem[i].style.color = "red";
79: case 1 :
80: alert(this.ErrorMessage.join("\n"));
81: this.ErrorItem[1].focus();
82: break;
83: case 3 :
84: for(var i=1;i<errCount;i++){
85: try{
86: var span = document.createElement("SPAN");
87: span.id = "__ErrorMessagePanel";
88: span.style.color = "red";
89: this.ErrorItem[i].parentNode.appendChild(span);
90: span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
91: }
92: catch(e){alert(e.description);}
93: }
94: this.ErrorItem[1].focus();
95: break;
96: default :
97: alert(this.ErrorMessage.join("\n"));
98: break;
99: }
100: return false;
101: }
102: return true;
103: },
104: limit : function(len,min, max){
105: min = min || 0;
106: max = max || Number.MAX_VALUE;
107: return min <= len && len <= max;
108: },
109: LenB : function(str){
110: return str.replace(/[^\x00-\xff]/g,"**").length;
111: },
112: ClearState : function(elem){
113: with(elem){
114: if(style.color == "red")
115: style.color = "";
116: var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
117: if(lastNode.id == "__ErrorMessagePanel")
118: parentNode.removeChild(lastNode);
119: }
120: },
121: AddError : function(index, str){
122: this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
123: this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
124: },
125: Exec : function(op, reg){
126: return new RegExp(reg,"g").test(op);
127: },
128: compare : function(op1,operator,op2){
129: switch (operator) {
130: case "NotEqual":
131: return (op1 != op2);
132: case "GreaterThan":
133: return (op1 > op2);
134: case "GreaterThanEqual":
135: return (op1 >= op2);
136: case "LessThan":
137: return (op1 < op2);
138: case "LessThanEqual":
139: return (op1 <= op2);
140: default:
141: return (op1 == op2);
142: }
143: },
144: MustChecked : function(name, min, max){
145: var groups = document.getElementsByName(name);
146: var hasChecked = 0;
147: min = min || 1;
148: max = max || groups.length;
149: for(var i=groups.length-1;i>=0;i--)
150: if(groups[i].checked) hasChecked++;
151: return min <= hasChecked && hasChecked <= max;
152: },
153: DoFilter : function(input, filter){
154: return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);
155: },
156: IsIdCard : function(number){
157: var date, Ai;
158: var verify = "10x98765432";
159: var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
160: var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外'];
161: 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);
162: if(re == null) return false;
163: if(re[1] >= area.length || area[re[1]] == "") return false;
164: if(re[2].length == 12){
165: Ai = number.substr(0, 17);
166: date = [re[9], re[10], re[11]].join("-");
167: }
168: else{
169: Ai = number.substr(0, 6) + "19" + number.substr(6);
170: date = ["19" + re[4], re[5], re[6]].join("-");
171: }
172: if(!this.IsDate(date, "ymd")) return false;
173: var sum = 0;
174: for(var i = 0;i<=16;i++){
175: sum += Ai.charAt(i) * Wi[i];
176: }
177: Ai += verify.charAt(sum%11);
178: return (number.length ==15 || number.length == 18 && number == Ai);
179: },
180: IsDate : function(op, formatString){
181: formatString = formatString || "ymd";
182: var m, year, month, day;
183: switch(formatString){
184: case "ymd" :
185: m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
186: if(m == null ) return false;
187: day = m[6];
188: month = m[5]*1;
189: year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
190: break;
191: case "dmy" :
192: m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
193: if(m == null ) return false;
194: day = m[1];
195: month = m[3]*1;
196: year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
197: break;
198: default :
199: break;
200: }
201: if(!parseInt(month)) return false;
202: month = month==0 ?12:month;
203: var date = new Date(year, month-1, day);
204: return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());
205: function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
206: }
207: }
使用：
| 语法：dataType="Require | Chinese | English | Number | Integer | Double | Email | Url | Phone | Mobile | Currency | Zip | IdCard | QQ | Date | SafeString | Repeat | Compare | Range | Limit | LimitB | Group | Custom"
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 类型：字符串。必选。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 说明：用于设定表单项的输入数据验证类型。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 选值说明： | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
示例：
引用：http://www.phpchina.com/?1133/action_viewspace_itemid_3631.html
http://www.phpchina.com/?8133/action_viewspace_itemid_3214.html
示例是html代码，不会上传，copy过来变成页面了，用帖子回复又可以了。
元字符:
/b 代表着单词的开头或结尾，也就是单词的分界处.如果要精确地查找hi这个单词的话，我们应该使用/bhi/b.
.是另一个元字符，匹配除了换行符以外的任意字符,*同样是元字符，它指定*前边的内容可以重复任意次以使整个表达式得到匹配。
.*连在一起就意味着任意数量的不包含换行的字符。
/d是一个新的元字符，匹配任意的数字,0/d/d-/d/d/d/d/d/d/d/d也就是中国的电话号码.为了避免那么多烦人的重复，我们也可以这样写这个表达式：0/d{2}-/d{8}。
/s匹配任意的空白符，包括空格，制表符(Tab)，换行符，中文全角空格等。/w匹配字母或数字或下划线或汉字。
/b/w{6}/b 匹配刚好6个字母/数字的单词。
字符转义：使用/来取消这些字符的特殊意义。因此，你应该使用/.和/*。当然，要查找/本身，你也得用//。
代码 说明
. 匹配除换行符以外的任意字符
/w 匹配字母或数字或下划线或汉字
/s 匹配任意的空白符
/d 匹配数字
/b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
重复：
常用的限定符
代码/语法 说明
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
要想查找数字，字母或数字，你只需要在中括号里列出它们就行了，像[aeiou]就匹配任何一个元音字母，[.?!]匹配标点符号(.或?或!)
反义：
常用的反义代码
代码/语法 说明
/W 匹配任意不是字母，数字，下划线，汉字的字符
/S 匹配任意不是空白符的字符
/D 匹配任意非数字的字符
/B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
替换：
正则表达式里的替换指的是有几种规则，如果满足其中任意一种规则都应该当成匹配，具体方法是用|把不同的规则分隔开。
0/d{2}-/d{8}|0/d{3}-/d{7}这个表达式能匹配两种以连字号分隔的电话号码：一种是三位区号，8位本地号(如010-12345678)，一种是4位区号，7位本地号(0376-2233445)。
/(0/d{2}/)[- ]?/d{8}|0/d{2}[- ]?/d{8}这个表达式匹配3位区号的电话号码，其中区号可以用小括号括起来，也可以不用，区号与本地号间可以用连字号或空格间隔，也可以没有间隔。你可以试试用替换|把这个表达式扩展成也支持4位区号的。
/d{5}-/d{4}|/d{5}这个表达式用于匹配美国的邮政编码。美国邮编的规则是5位数字，或者用连字号间隔的9位数字。之所以要给出这个例子是因为它能说明一个问题：使用替换时，顺序是很重要的。如果你把它改成/d{5}|/d{5}-/d{4}的话，那么就只会匹配5位的邮编(以及9位邮编的前5位)。原因是匹配替换时，将会从左到右地测试每个分枝条件，如果满足了某个分枝的话，就不会去管其它的替换条件了。
分组：
如果想要重复一个字符串又该怎么办？你可以用小括号来指定子表达式(也叫做分组)，然后你就可以指定这个子表达式的重复次数了。
(/d{1,3}/.){3}/d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式，请按下列顺序分析它：/d{1,3}匹配1到3位的数字，(/d{1,3}/.}{3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次，最后再加上一个一到三位的数字(/d{1,3})。不幸的是，它也将匹配256.300.888.999这种不可能存在的IP地址(IP地址中每个数字都不能大于255)。如果能使用算术比较的话，或许能简单地解决这个问题，但是正则表达式中并不提供关于数学的任何功能，所以只能使用冗长的分组，选择，字符类来描述一个正确的IP地址：((2[0-4] /d|25[0-5]|[01]?/d/d?)/.){3}(2[0-4]/d|25[0-5]|[01]?/d/d?)。
后向引用：
后向引用用于重复搜索前面某个分组匹配的文本。例如，/1代表分组1匹配的文本。难以理解？请看示例：
/b(/w+)/b/s+/1/b可以用来匹配重复的单词，像go go, kitty kitty。首先是一个单词，也就是单词开始处和结束处之间的多于一个的字母或数字(/b(/w+)/b)，然后是1个或几个空白符(/s+，最后是前面匹配的那个单词(/1)。
懒惰限定符
*? 重复任意次，但尽可能少重复
+? 重复1次或更多次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
{n,m}? 重复n到m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复
位置指定:
接下来的四个用于查找在某些内容(但并不包括这些内容)之前或之后的东西，也就是说它们用于指定一个位置，就像/b,^,$那样，因此它们也被称为零宽断言。最好还是拿例子来说明吧：
(?=exp)也叫零宽先行断言，它匹配文本中的某些位置，这些位置的后面能匹配给定的后缀exp。比如/b/w+(?=ing/b)，匹配以 ing结尾的单词的前面部分(除了ing以外的部分)，如果在查找I'm singing while you're dancing.时，它会匹配sing和danc。
(?<=exp)也叫零宽后行断言，它匹配文本中的某些位置，这些位置的前面能给定的前缀匹配exp。比如(?<=/bre)/w+/b会匹配以re开头的单词的后半部分(除了re以外的部分)，例如在查找reading a book时，它匹配ading。
假如你想要给一个很长的数字中每三位间加一个逗号(当然是从右边加起了)，你可以这样查找需要在前面和里面添加逗号的部分：((?<=/d)/d{3})*/b。请仔细分析这个表达式，它可能不像你第一眼看出来的那么简单。
下面这个例子同时使用了前缀和后缀：(?<=/s)/d+(?=/s)匹配以空白符间隔的数字(再次强调，不包括这些空白符)。
负向位置指定:
前面我们提到过怎么查找不是某个字符或不在某个字符类里的字符的方法(反义)。但是如果我们只是想要确保某个字符没有出现，但并不想去匹配它时怎么办？例如，如果我们想查找这样的单词--它里面出现了字母q,但是q后面跟的不是字母u,我们可以尝试这样：
/b/w*q[^u]/w*/b匹配包含后面不是字母u的字母q的单词。但是如果多做测试(或者你思维足够敏锐，直接就观察出来了)，你会发现，如果q出现在单词的结尾的话，像Iraq,Benq，这个表达式就会出错。这是因为[^u]总是匹配一个字符，所以如果q是单词的最后一个字符的话，后面的 [^u]将会匹配q后面的单词分隔符(可能是空格，或者是句号或其它的什么)，后面的/w+/b将会匹配下一个单词，于是/b/w*q[^u]/w*/b 就能匹配整个Iraq fighting。负向位置指定能解决这样的问题，因为它只匹配一个位置，并不消费任何字符。现在，我们可以这样来解决这个问题：/b/w*q(?!u) /w*/b。
零宽负向先行断言(?!exp)，只会匹配后缀exp不存在的位置。/d{3}(?!/d)匹配三位数字，而且这三位数字的后面不能是数字。
同理，我们可以用(?<!exp),零宽负向后行断言来查找前缀exp不存在的位置：(?<![a-z])/d{7}匹配前面不是小写字母的七位数字(实验时发现错误？注意你的“区分大小写”先项是否选中)。
一个更复杂的例子：(?<=<(/w+)>).*(?=<///1>)匹配不包含属性的简单HTML标签内里的内容。(<?(/w+)>)指定了这样的前缀：被尖括号括起来的单词(比如可能是<b>)，然后是.*(任意的字符串),最后是一个后缀(?=<///1>)。注意后缀里的//，它用到了前面提过的字符转义；/1则是一个反向引用，引用的正是捕获的第一组，前面的(/w +)匹配的内容，这样如果前缀实际上是<b>的话，后缀就是</b>了。整个表达式匹配的是<b>和< /b>之间的内容(再次提醒，不包括前缀和后缀本身)。
注释:
小括号的另一种用途是能过语法(?#comment)来包含注释。例如：2[0-4]/d(?#200-249)|25[0-5](?#250-255)|[01]?/d/d?(?#0-199)。
要包含注释的话，最好是启用“忽略模式里的空白符”选项，这样在编写表达式时能任意的添加空格，Tab，换行，而实际使用时这些都将被忽略。启用这个选项后，在#后面到这一行结束的所有文本都将被当成注释忽略掉。
例如，我们可以前面的一个表达式写成这样：
(?<= # 查找前缀，但不包含它
<(/w+)> # 查找尖括号括起来的字母或数字(标签)
) # 前缀结束
.* # 匹配任意文本
(?= # 查找后缀，但不包含它
<///1> # 查找尖括号括起来的内容：前面是一个"/"，后面是先前捕获的标签
) # 后缀结束
贪婪与懒惰:
当正则表达式中包含能接受重复的限定符(指定数量的代码，例如*, {5,12}等)时，通常的行为是（在使整个表达式能得到匹配的前提下）匹配尽可能多的字符。考虑这个表达式：a.*b，它将会匹配最长的以a开始，以b 结束的字符串。如果用它来搜索aabab的话，它会匹配整个字符串aabab。这被称为贪婪匹配。
有时，我们更需要懒惰匹配，也就是匹配尽可能少的字符。前面给出的限定符都可以被转化为懒惰匹配模式，只要在它后面加上一个问号?。这样.*?就意味着匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。现在看看懒惰版的例子吧：
a.*?b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab和ab（为什么第一个匹配是aab而不是ab？简单地说，最先开始的区配最有最大的优先权??The Match That Begins Earliest Wins）。
表5.懒惰限定符 *? 重复任意次，但尽可能少重复
+? 重复1次或更多次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
{n,m}? 重复n到m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复
-------------------------------------------------------
下面是一些常用的正则表达式:
匹配中文字符的正则表达式： [/u4e00-/u9fa5]
评注：匹配中文还真是个头疼的事，有了这个表达式就好办了
匹配双字节字符(包括汉字在内)：[^/x00-/xff]
评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
匹配空白行的正则表达式：/n/s*/r
评注：可以用来删除空白行
匹配HTML标记的正则表达式：<(/S*?)[^>]*>.*?<//1>|<.*? />
评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式：^/s*|/s*$
评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式
匹配Email地址的正则表达式：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
评注：表单验证时很实用
匹配网址URL的正则表达式：[a-zA-z]+://[^/s]*
评注：网上流传的版本功能很有限，上面这个基本可以满足需求
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注：表单验证时很实用
匹配国内电话号码：/d{3}-/d{8}|/d{4}-/d{7}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]/d{5}(?!/d)
评注：中国邮政编码为6位数字
匹配身份证：/d{15}|/d{18}
评注：中国的身份证为15位或18位
匹配ip地址：/d+/./d+/./d+/./d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]/d*$ //匹配正整数
