表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。
Validator是基于JavaScript技术的伪静态类和对象的自定义属性,可以对网页中的表单项输入进行相应的验证,允许同一页面中同时验证多个表单,熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪静态类,所以在调用时不需要实例化,直接以"类名+.语法+属性或方法名"来调用。此外,Validator还提供3种不同的错误提示模式,以满足不同的需要。
** 完整文档下载 **
Validator.chm
Validator目前可实现的验证类型有:
1.是否为空;
2.中文字符;
3.双字节字符
4.英文;
5.数字;
6.整数;
7.实数;
8.Email地址;
9.使用HTTP协议的网址;
10.电话号码;
11.货币;
12.手机号码;
13.邮政编码;
14.身份证号码;
15.QQ号码;
16.日期;
17.符合安全规则的密码;
18.某项的重复值;
19.两数的关系比较;
20.判断输入值是否在(n, m)区间;
21.输入字符长度限制(可按字节比较);
22.对于具有相同名称的单选按钮的选中判断;
23.限制具有相同名称的多选按钮的选中数目;
24.自定义的正则表达式验证;
运行环境(客户端):
在Windows Server 2003下用IE6.0+SP1和Mozilla Firefox 1.0测试通过;
在Lunix RedHat 9下的Netscape测试通过
Validator 完整代码:
1<script>
2/*************************************************
3Validator v1.01
4code by 我佛山人
5[email protected]
6http://www.cunite.com
7*************************************************/
8Validator = {
9Require : /.+/,
10Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\\.\w+([-.]\w+)*$/,
11Phone : /^((\\(\d{3}\\))|(\d{3}\\-))?(\\(0\d{2,3}\\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
12Mobile : /^((\\(\d{3}\\))|(\d{3}\\-))?13\d{9}$/,
13Url : /^http:\/\/[A-Za-z0-9]+\\.[A-Za-z0-9]+[\/=\?%\\-&_~`@[\\]\':+!]*([^<>\"\"])*$/,
14IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
15Currency : /^\d+(\\.\d+)?$/,
16Number : /^\d+$/,
17Zip : /^[1-9]\d{5}$/,
18QQ : /^[1-9]\d{4,8}$/,
19Integer : /^[-\\+]?\d+$/,
20Double : /^[-\\+]?\d+(\\.\d+)?$/,
21English : /^[A-Za-z]+$/,
22Chinese : /^[\u0391-\uFFE5]+$/,
23UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\\*\\.\\(\\)\\[\\]\\{\\}<>\?\\\\\/\'\"]*)|.{0,5})$|\s/,
24IsSafe : function(str){return !this.UnSafe.test(str);},
25SafeString : "this.IsSafe(value)",
26Limit : "this.limit(value.length,getAttribute('min'), getAttribute('max'))",
27LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
28Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
29Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
30Range : "getAttribute('min') < value && value < getAttribute('max')",
31Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
32Custom : "this.Exec(value, getAttribute('regexp'))",
33Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
34ErrorItem : [document.forms[0]],
35ErrorMessage : ["以下原因导致提交失败:\t\t\t\t"],
36Validate : function(theForm, mode){
37var obj = theForm || event.srcElement;
38var count = obj.elements.length;
39this.ErrorMessage.length = 1;
40this.ErrorItem.length = 1;
41this.ErrorItem[0] = obj;
42for(var i=0;i<count;i++){
43with(obj.elements[i]){
44var _dataType = getAttribute("dataType");
45if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined") continue;
46this.ClearState(obj.elements[i]);
47if(getAttribute("require") == "false" && value == "") continue;
48switch(_dataType){
49case "Date" :
50case "Repeat" :
51case "Range" :
52case "Compare" :
53case "Custom" :
54case "Group" :
55case "Limit" :
56case "LimitB" :
57case "SafeString" :
58if(!eval(this[_dataType])) {
59this.AddError(i, getAttribute("msg"));
60}
61break;
62default :
63if(!this[_dataType].test(value)){
64this.AddError(i, getAttribute("msg"));
65}
66break;
67}
68}
69}
70if(this.ErrorMessage.length > 1){
71mode = mode || 1;
72var errCount = this.ErrorItem.length;
73switch(mode){
74case 2 :
75for(var i=1;i<errCount;i++)
76this.ErrorItem[i].style.color = "red";
77case 1 :
78alert(this.ErrorMessage.join("\n"));
79this.ErrorItem[1].focus();
80break;
81case 3 :
82for(var i=1;i<errCount;i++){
83try{
84var span = document.createElement("SPAN");
85span.id = "__ErrorMessagePanel";
86span.style.color = "red";
87this.ErrorItem[i].parentNode.appendChild(span);
88span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
89}
90catch(e){alert(e.description);}
91}
92this.ErrorItem[1].focus();
93break;
94default :
95alert(this.ErrorMessage.join("\n"));
96break;
97}
98return false;
99}
100return true;
101},
102limit : function(len,min, max){
103min = min || 0;
104return min <= len && len <= max;
105},
106LenB : function(str){
107return str.replace(/[^\x00-\xff]/g,"**").length;
108},
109ClearState : function(elem){
110with(elem){
111if(style.color == "red")
112style.color = "";
113var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
114if(lastNode.id == "__ErrorMessagePanel")
115parentNode.removeChild(lastNode);
116}
117},
118AddError : function(index, str){
119this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
120this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
121},
122Exec : function(op, reg){
123return new RegExp(reg,"g").test(op);
124},
125compare : function(op1,operator,op2){
126switch (operator) {
127case "NotEqual":
128return (op1 != op2);
129case "GreaterThan":
130return (op1 > op2);
131case "GreaterThanEqual":
132return (op1 >= op2);
133case "LessThan":
134return (op1 < op2);
135case "LessThanEqual":
136return (op1 <= op2);
137default:
138return (op1 == op2);
139}
140},
141MustChecked : function(name, min, max){
142var groups = document.getElementsByName(name);
143var hasChecked = 0;
144min = min || 1;
145max = max || groups.length;
146for(var i=groups.length-1;i>=0;i--)
147if(groups[i].checked) hasChecked++;
148return min <= hasChecked && hasChecked <= max;
149},
150IsDate : function(op, formatString){
151formatString = formatString || "ymd";
152var m, year, month, day;
153switch(formatString){
154case "ymd" :
155m = op.match(new RegExp("^((\\\d{4})|(\\\d{2}))([-./])(\\\d{1,2})\\\4( \\\d{1,2})$ "));
156if(m == null ) return false;
157day = m[6];
158month = m[5]--;
159year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
160break;
161case "dmy" :
162m = op.match(new RegExp("^(\\\d{1,2})([-./])(\\\d{1,2})\\\2((\\\d{4})|( \\\d{2}))$ "));
163if(m == null ) return false;
164day = m[1];
165month = m[3]--;
166year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
167break;
168default :
169break;
170}
171if(!parseInt(month)) return false;
172month = month==12 ?0:month;
173var date = new Date(year, month, day);
174return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
175function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
176}
177}
178</script>