当前页面: 开发资料首页 → Javascript 专题 → 一个非常强大完整的web表单验证程序

一个非常强大完整的web表单验证程序

摘要: 一个非常强大完整的web表单验证程序

<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible"> 表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把精力集中于网页的设计和功能上的改进上。

　　Validator是基于JavaScript技术的伪静态类和对象的自定义属性，可以对网页中的表单项输入进行相应的验证，允许同一页面中同时验证多个表单，熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。因为是伪静态类，所以在调用时不需要实例化，直接以"类名+.语法+属性或方法名"来调用。此外，Validator还提供3种不同的错误提示模式，以满足不同的需要。

　　完整文档下载:　Validator.chm (zip压缩,111K)

　　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 完整代码：






<table align="center">

<form name="theForm" id="demo" action="" method="get"

<tr>

<td>真实姓名：</td><td><input name="Name" dataType="Chinese" </td>

</tr>

<tr>

<td>英文名：</td><td><input name="Nick" dataType="English" </td>

</tr>

<tr>

<td>主页：</td><td><input name="Homepage" require="false" </td>

</tr>

<tr>

<td>密码：</td><td><input name="Password" dataType="SafeString" </td>

</tr>

<tr>

<td>重复：</td><td><input name="Repeat" dataType="Repeat" </td>

</tr>

<tr>

<td>信箱：</td><td><input name="Email" dataType="Email" </td>

</tr>

<tr>

<td>信箱：</td><td><input name="Email" dataType="Repeat" </td>

</tr>

<tr>

<td>QQ：</td><td><input name="QQ" require="false" </td>

</tr>

<tr>

<td>身份证：</td><td><input name="Card" dataType="IdCard" </td>

</tr>

<tr>

<td>年龄：</td><td><input name="Year" dataType="Range" </td>

</tr>

<tr>

<td>年龄1：</td><td><input name="Year1" require="false" </td>

</tr>

<tr>

<td>电话：</td><td><input name="Phone" require="false" </td>

</tr>

<tr>

<td>手机：</td><td><input name="Mobile" require="false" </td>

</tr>

<tr>

<td>生日：</td><td><input name="Birthday" dataType="Date" </td>

</tr>

<tr>

<td>邮政编码：</td><td><input name="Zip" dataType="Custom" </td>

</tr>

<tr>

<td>邮政编码：</td><td><input name="Zip1" dataType="Zip" </td>

</tr>

<tr>

<td>操作系统：</td><td><select name="Operation" dataType="Require" <option value="">选择您所用的操作系统</option><option Win98</option><option value="Win2k">Win2k</option><option WinXP</option></select></td>

</tr>

<tr>

<td>所在省份：</td><td>广东<input name="Province" value="1" 陕西<input name="Province" value="2" 浙江<input name="Province" value="3" 江西<input name="Province" value="4" </td>

</tr>

<tr>

<td>爱好：</td><td>运动<input name="Favorite" value="1" 上网<input name="Favorite" value="2" 听音乐<input name="Favorite" value="3" 看书<input name="Favorite" value="4" msg="必须选择2~3种爱好"></td>

</tr>

<td>自我介绍：</td><td><textarea name="Description" 中文是一个字</textarea></td>

</tr>

<td>自传：</td><td><textarea name="History" dataType="LimitB" 中文是两个字节t</textarea></td>

</tr>

<tr>

<td colspan="2"><input name="Submit" type="submit" <input onClick="Validator.Validate(document.getElementById('demo'))" <input onClick="Validator.Validate(document.getElementById('demo'),2)" <input onClick="Validator.Validate(document.getElementById('demo'),3)" </td>

</tr>

</form>

</table>

<script>

/*************************************************

Validator v1.0

cody by 我佛山人

wfsr@cunite.com

http://www.cunite.com

*************************************************/

Validator = {

Require : /.+/,

Email : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/,

Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,

Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,

Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,

IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,

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]+$/,

UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,

IsSafe : function(str){return !this.UnSafe.test(str);},

SafeString : "this.IsSafe(value)",

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 && value < 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
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 "Date" :

case "Repeat" :

case "Range" :

case "Compare" :

case "Custom" :

case "Group" :

case "Limit" :

case "LimitB" :

case "SafeString" :

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
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
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;

},

IsDate : function(op, formatString){

formatString = formatString || "ymd";

var m, year, month, day;

switch(formatString){

case "ymd" :

m = op.match(new RegExp("^\\s*((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})\\s*$"));

if(m == null ) return false;

day = m[6];

month = m[5]--;

year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));

break;

case "dmy" :

m = op.match(new RegExp("^\\s*(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))\\s*$"));

if(m == null ) return false;

day = m[1];

month = m[3]--;

year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));

break;

default :

break;

}

var date = new Date(year, month, day);

return (typeof(date) == "object" && year == date.getFullYear()
&& month == date.getMonth() && day == date.getDate());

function GetFullYear(y){return ((y<30 ? "20" : "19") +
y)|0;}

}

}

</script>