简洁的表单验证程序

导读：
　　第 1 页 简洁的表单验证程序 [1]
　　第 2 页 简洁的表单验证程序 [1]
　　验证规则参数：
　　obj — 表单控件name
　　minLength — 填写的字符串最小长度0意味着可以不填 而1意味着是必添
　　dataType — 验证格式 有
　　e-mail
　　url
　　date
　　number
　　any
　　还有两种动态的格式用/开头, /表单控件的name 表示必须与之的值一样；
　　/>数字 表示大于数字，类推；但是没有/>=这样的
　　maxLength — 最大长度。
　　与其他程序不一样的是：我对http地址与日期格式地址的处理不同，填入的地址没有http://我会添加上后验证，这样比较人性化，符合可用性的要求。日期的处理也是一样，先尽可能的对填写的数字进行格式转化，然后再验证。格式采用了yyyy-mm-dd的格式。
　　原始位置：http://lxbzj.com/product/vform/index.htm ，原始文件应用一个日历输入控件在此省略。。。
　　 总代码：
　　运行代码框
　　< html xmlns="http://www.w3.org/1999/xhtml">< head>< meta http-equiv="Content-Type" content="text/html; charset=gb2312" />< title>vForm表单验证程序< style type="text/css"> < script language="JavaScript" type="text/javascript">//程序基本思路：通过扩展对象来实现，将String扩展 将默认的表单元素扩展 定义两个自定义对象。//String.isEmail//String.isUrl//表单元素.required//表单元素.isvalid//表单元素.validate字符串验证扩展//├电子邮件验证 String.prototype.isEmail = function(){ var tmpStr = this; var email = /^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/; return email.test(tmpStr)}//├http地址验证 String.prototype.isUrl = function(){ var url = /^http:[A-Za-z0-9]+/.[A-Za-z0-9]+[//=/?%/-&_~`@[/]/':+!]*([^<>/"/"])*$/; var tmpStr = this; return url.test(tmpStr);}//├日期验证（第一部分） String.prototype.isDateTime = function(){ if(Date.parse(this)||Date.parseDate(this)) { return true; } else { return false; }} String.prototype.isInteger = function(){ var _i = /^[-/+]?/d+$/; var _s = this; return _i.test(_s);} Date.prototype.toIsoDate = function(){ var _d = this; var _s; _Y =_d.getFullYear(); _M = _d.getMonth() + 1; _D = _d.getDate(); _H = _d.getHours(); _I = _d.getMinutes(); _S = _d.getSeconds(); with(_d) { _s = [getMonth() + 1,getDate(),getHours(),getMinutes(),getSeconds()]; } for(var i = 0; i <_s.length; i++) { if (_s[i].toString().length == 1)_s[i]= '0'+_s[i]; } return (_Y + '-'+_s[0]+'-'+_s[1]+' '+_s[2]+':'+_s[3]+':'+_s[4])}//├日期验证（第二部分） Date.parseDate = function(str, fmt) { fmt = fmt||"%Y-%m-%d %H:%M"; var today = new Date(); var y = 0; var m = -1; var d = 0; var a = str.split(//W+/); var b = fmt.match(/%./g); var i = 0, j = 0; var hr = 0; var min = 0; for (i = 0; i ="12)" &&(this.maxLength b="true;" ) &&this.maxLength ?textarea? if(this.type="=" <="this.value.length);" if(this.minLength) () _o.validLength="function" 添加长度验证函数 _o.maxLength="parseInt(_r[4]);" if(_r[4]) 判断是否有最大长度; _o.minLength="parseInt(_r[1]);" _o.required="true;//必填的含义和最小长度为1是一样的" else >0 if(_r[1] 判断是是否必填,是否有最小长度 if(_o="o.elements[_r[0]])" 如果存在元素，则添加验证程序 _r="this.rules[i]" this.rules.length;i++) ;i< i for(var 遍历规则 o="document.getElementById(this.form_id);" 获取表单 if(document.getElementById(this.form_id)) vform.init="function(){" this.length;} ]; 6 , 5 4 3 2 1 0 this[curlen]="[obj,minLength,dataType,errmsg,maxLength,rule,patams];" curlen="this.length;" vform.rules.add="function(obj,minLength,dataType,errmsg,maxLength,rule,patams){" Array; vform.rules="new" lxbzj.com/n许可：LGPL?);} return(?vForm表单验证程序/n版本：1.0beta/n作者：雷晓宝/n时间：2006-07-31/n网址：http: vform.toString="function(){" _p; while(el="el.offsetParent)" el.scrollTop); - +="(y" _p.y el.scrollLeft); _p.x do{ y: 0, x: _p="{" vform.getAbsolutePos="function(el)" 获取弹出提示的显示位置 Object; vform="new" 对象定义 扩展完成 today;}; 0); min, hr, d, m, Date(y, new &&d (m y="parseInt(a[i]," 0) (y d="parseInt(a[i]," (d="=" 2000); : 1900 ? >29) &&(y <100) 10); &&y="=" >31 10) (parseInt(a[i], m="parseInt(a[i]," -1) &&m <="12" (t t="-1;" a[i].toLowerCase()) a[i].length).toLowerCase()="=" (Calendar._MN[j].substr(0, ++j) <12; j (j="0;" for [a-zA-Z]+ (a[i].search( ++i) b?1:1; } break; case 'number': _o.validate = function() { this.isvalid = this.validLength() &&this.value.isInteger(); return (this.isvalid); } break; case 'any': _o.validate = function() { this.isvalid = this.validLength(); return this.isvalid } break; default : var regexp = /^///w+$/; if ( regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证 { _el = _r[2].substring(1); if (o.elements[_el]){ _o.equal = _el; _o.validate = function() { if(_o = this.form.elements[this.equal]) { if ( (_o.value == this.value) &&this.validLength()) { return true; }else { return false; } }else{ alert('setup error'); } } }else { alert(_el + 'is not a valid form element'); _o.validate = function(){return true;} } } var regexp1 = /^//(==|!=|>=|<=|>|<)/; if ( regexp1.test(_r[2]) ) { _s0 = _r[2]; _s1 = RegExp.$1; _s2 = _s0.replace(regexp1,'); _operator = _s1.substring(0);//比较操作符 var regexp2 = /^/w+$/; if (regexp2.test(_s2))//是一个标志符，整数 或者变量 { _o.operation = _operator+_s2; _o.validate = function() { _b = true; if (this.value.length !=0) { _b = eval(this.value+this.operation+';'); } _b = _b &&this.validLength(); return _b; } } }; break; } //添加验证提示(div标签)并初始化 var _p = vform.getAbsolutePos(_o); _o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y); _o.tip.init(); //失去焦点时，开始验证 _o.onblur =function(e) { if(this.minLength || this.value.length >0) { if( this.validate() ) { this.tip.hide(); }else { this.tip.show();//显示错误信息 //this.focus(); 添加这句在ie里会导致死循环 :( return false; } } } } } //焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。 document.getElementById(this.form_id).onsubmit = function() { var valid = true; for(i=0;i ?,20); >必填项目< > ?,100); vform.rules.add(?ok100?,1,?any?,?这里被限制为100个字符
?); vform.rules.add(?least10?,10,?any?,?您必须至少填写10个
2",'必须大于2000
必填项目'); vform.init(); }< body οnlοad="start()">< form id="form1" name="form1" method="get" action=""> < label for="frm_name">e-mail: < input name="frm_name" type="text" class="text_input" id="frm_name" title="输入一个电子邮箱地址"/> * < p> < label for="r_pass0">输入密码： < input name="r_pass0" type="text" class="text_input" id="r_pass0" title="输入您希望的密码 " /> *

< p> < label for="r_pass1">密码确认： < input name="r_pass1" type="text" class="text_input" id="r_pass1" title="将密码确认一次" /> *

< p> < label for="frm_sel">选择： < select name="frm_sel" id="frm_sel" title="请选择一个答案"> < option value="0">请选择一个答案 < option value="1" selected="selected">1000 < option value="2">2000 < option value="3">3000 < option value="4">4000 < option value="5">5000 < option value="6">6000 *

< p> < label for="input3">输入网址： < input name="myweb" type="text" class="text_input" id="input3" title="输入一个网址" οnmοusemοve="" value="http://" maxlength="100"/> *

< p> < label for="dateinput">输入日期 < input name="dateinput" type="text" class="text_input" title="输入一个日期" id="dateinput"/> *

< p> < label for="mub">输入数字 < input name="qq" type="text" class="text_input" title="填写数字" id="mub"/>

< p> < label for="len">输入任意但长度限制为10个 < input name="least10" type="text" class="text_input" maxlength="88" id="len"/> *

< p> < label for="text">只能输入100个 < textarea name="ok100" cols="40" rows="5" id="text" title="详细内容"> *

< p> < input type="submit" name="Submit" value="提交" /> < button οnclick="alert(vform)" >关于验证程序

< script type="text/javascript"> vform .init(); Calendar.setup({ inputField : "dateinput", // 把这个改成你需要的 id ifFormat : "%Y-%m-%d %H:%M", // format of the input field showsTime : true, //button : "dateinput_btn", timeFormat : "24" }); < div class="title"> < h1>vForm1.0beta < ul> < li>作者：雷晓宝 < li>时间：2006-08-08 < li>网址：http://lxbzj.com < li>e-mail:lxbzmy@163.com < li>许可：LGPL < h2>功能简述： < ol> < li> < h3>验证： < ul> < li>http地址。 < li>时间日期 < li>e-mail < li>数字 < li>字符长度检查 < li>一项输入与另一项输入比较（例如：密码的确认输入） < li>大小比较（只能有一个比较符号） < li> < h3>特点 < ul> < li>扩展容易，可以方便的添加自己需要的验证方式 < li>兼容性好（ie5,6 firefox,oprea）。 < li>可用性好，没有使用alert()来弹出提示; < p>

< h2>使用方法 < p>使用时，需要定义一个出错提示框的样式，本例的样式为：div.info { width: 170px;
overflow:visible;
height:auto;
font-size: small;
position: absolute;
background-color: #FFffdd;
border: 1px solid #000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);
padding: 5px;
}

< p>然后在网页部分中添加<script type="text/javascript" src="calendar/calendar.js"></script>
，然后可以写一个函数设置表单名称，验证规则，function start()
{ < br /> vFormvform.form_id = 'form1';
vform.err_class = 'info';
// (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams)
//验证规则，逐条填写
vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。
必填项目');
vform.rules.add('myweb',1,'url','请您按照 http://www.domain.com 的格式输入您的网址。
必填项目');
vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。
必填项目');
vform.rules.add('qq',0,'number','这必须是一个整数');
vform.rules.add('least10',10,'any','您必须至少填写10个
必填项目');
vform.rules.add('ok100',1,'any','这里被限制为100个字符
必填项目',100);
vform.init();
}最后为body添加onload事件。

< p>

　　[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

本文转自
http://www.blueidea.com/tech/web/2006/3957_2.asp