分享
 
 
 

用正则表达式和javascript对表单进行全面验证

王朝html/css/js·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

代码:<!--

使用时请将下面的javascript代码存到一个单一的js文件中。

1、表单要求

<form name="formname" onSubmit="return validateForm(this)"></form>

将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。

2、空值验证

表单中任意域加上emptyInfo属性将对此域是否为空进行验证(可以和最大长度验证\一般验证方式同时使用)。

无此属性视为此域允许空值。

如:<input type="text" name="fieldNamename" emptyInfo="字段不能为空!">

3、最大长度验证(可以和空值验证、一般验证方式同时使用):

<input type="text" name="fieldNamename" maxlength="20" lengthInfo="最大长度不能超过20!">

或,<textarea maxlength="2000" lengthInfo="最大长度不能超过2000!">

3、一般验证方式(不对空值做验证):

如:<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" >

4、标准验证(不与其它验证方式同时使用):

全部通过<input type="hidden">来实现,并且不需要name属性以免提交到服务器。

4.1、合法日期验证:

<input type="text" name="yearfieldName" value="2004">注:这里也可以是<select name="yearfieldName"></select>,以下同

<input type="text" name="monthfieldName" value="02">

<input type="text" name="dayfieldName" value="03">

<input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!">

yearfieldName、monthfieldName、dayfieldName分别为年月日字段,月和日可以是两位(MM)或一位格式(M),

此处不对每个字段分别检验(如果要检验,请在年月日三个域分别使用前面的一般验证方式),只对日期的最大值是否合法检查;

4.2、日期格式验证(请注意,此验证不对日期是否有效进行验证,还未找到从格式中得到年月日数据的方法^_^):

<input type="text" name="datefieldName" value="2003-01-03 21:31:00">

<input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!">

其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符)

4.3、列表验证:

检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择)

<input type="checkbox" name="checkbox1">

<input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!">

其中validatorType可以是Checkbox、R、Select;

对于一个select表单,如果要求选择一条不能是第一条的记录,请用下列方式:

<select name="select1" emptyInfo="请选择一个选项!">

<option value="">==请选择==</option>

<option value="1">1</option>

<select>

4.4、Email验证:

<input type="text" name="email">

<input type="hidden" fieldName="email" validatorType="Email" separator="," errorInfo="不正确的Email!">

其中separator为可选项,表示输入多个email时的分隔符(无此选项只能是一个地址)

4.5、加入其它javascript操作:

<script type="text/javascript">

function functionname(){

自定义方法

}

</script>

表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">(此时emptyInfo等属性无效)

时将调用function属性中指定的javascript方法(要求方法返回true或false,返回false将不再验证表单,也不提交表单)。

5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个

<input type="button" name="提交" validatorType="disable">

6、不验证表单

<input type="hidden" name="validate" value="0" functionName="functionname">

当validator域值为0时不对表单进行验证,直接提交表单或执行指定function并返回true后提交表单

functionName为可选

-->

<script type="text/javascript">

function getStringLength(str){

var endvalue=0;

var sourcestr=new String(str);

var tempstr;

for (var strposition = 0; strposition < sourcestr.length; strposition ++) {

tempstr=sourcestr.charAt(strposition);

if (tempstr.charCodeAt(0)>255 || tempstr.charCodeAt(0)<0) {

endvalue=endvalue+2;

} else {

endvalue=endvalue+1;

}

}

return(endvalue);

}

function trim(str){

if(str==null) return "";

if(str.length==0) return "";

var i=0,j=str.length-1,c;

for(;i<str.length;i++){

c=str.charAt(i);

if(c!=' ') break;

}

for(;j>-1;j--){

c=str.charAt(j);

if(c!=' ') break;

}

if(i>j) return "";

return str.substring(i,j+1);

}

function validateDate(date,format,alt){

var time=trim(date.value);

if(time=="") return;

var reg=format;

var reg=reg.replace(/yyyy/,"[0-9]{4}");

var reg=reg.replace(/yy/,"[0-9]{2}");

var reg=reg.replace(/MM/,"((0[1-9])|1[0-2])");

var reg=reg.replace(/M/,"(([1-9])|1[0-2])");

var reg=reg.replace(/dd/,"((0[1-9])|([1-2][0-9])|30|31)");

var reg=reg.replace(/d/,"([1-9]|[1-2][0-9]|30|31))");

var reg=reg.replace(/HH/,"(([0-1][0-9])|20|21|22|23)");

var reg=reg.replace(/H/,"([0-9]|1[0-9]|20|21|22|23)");

var reg=reg.replace(/mm/,"([0-5][0-9])");

var reg=reg.replace(/m/,"([0-9]|([1-5][0-9]))");

var reg=reg.replace(/ss/,"([0-5][0-9])");

var reg=reg.replace(/s/,"([0-9]|([1-5][0-9]))");

reg=new RegExp("^"+reg+"$");

if(reg.test(time)==false){//验证格式是否合法

alert(alt);

date.focus();

return false;

}

return true;

}

function validateDateGroup(year,month,day,alt){

var array=new Array(31,28,31,30,31,30,31,31,30,31,30,31);

var y=parseInt(year.value);

var m=parseInt(month.value);

var d=parseInt(day.value);

var maxday=array[m-1];

if(m==2){

if((y%4==0&&y%100!=0)||y%400==0){

maxday=29;

}

}

if(d>maxday){

alert(alt);

return false;

}

return true;

}

function validateCheckbox(obj,alt){

var rs=false;

if(obj!=null){

if(obj.length==null){

return obj.checked;

}

for(i=0;i<obj.length;i++){

if(obj[i].checked==true){

return true;

}

}

}

alert(alt);

return rs;

}

function validateRadio(obj,alt){

var rs=false;

if(obj!=null){

if(obj.length==null){

return obj.checked;

}

for(i=0;i<obj.length;i++){

if(obj[i].checked==true){

return true;

}

}

}

alert(alt);

return rs;

}

function validateSelect(obj,alt){

var rs=false;

if(obj!=null){

for(i=0;i<obj.options.length;i++){

if(obj.options[i].selected==true){

return true;

}

}

}

alert(alt);

return rs;

}

function validateEmail(email,alt,separator){

var mail=trim(email.value);

if(mail=="") return;

var em;

var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;

if(separator==null){

if(myReg.test(email.value)==false){

alert(alt);

email.focus();

return false;

}

}

else{

em=email.value.split(separator);

for(i=0;i<em.length;i++){

em[i]=em[i].trim();

if(em[i].length>0&&myReg.test(em[i])==false){

alert(alt);

email.focus();

return false;

}

}

}

return true;

}

function validateForm(theForm){// 若验证通过则返回true

var disableList=new Array();

var field = theForm.elements; // 将表单中的所有元素放入数组

for(var i = 0; i < field.length; i++){

var vali=theForm.validate;

if(vali!=null){

if(vali.value=="0"){

var fun=vali.functionName;

if(fun!=null){

return eval(fun+"()");

}

else{

return true;

}

}

}

var empty=false;

var value=trim(field[i].value);

if(value.length==0){//是否空值

empty=true;

}

var emptyInfo=field[i].emptyInfo;//空值验证

if(emptyInfo!=null&&empty==true){

alert(emptyInfo);

field[i].focus();

return false;

}

var lengthInfo=field[i].lengthInfo;//最大长度验证

if(lengthInfo!=null&&getStringLength(value)>field[i].maxLength){

alert(lengthInfo);

field[i].focus();

return false;

}

var validatorType=field[i].validatorType;

if(validatorType!=null){//其它javascript

var rs=true;

if(validatorType=="javascript"){

eval("rs="+field[i].functionName+"()");

if(rs==false){

return false;

}

else{

continue;

}

}

else if(validatorType=="disable"){//提交表单前disable的按钮

disableList.length++;

disableList[disableList.length-1]=field[i];

continue;

}

else if(validatorType=="Date"){

rs=validateDate(theForm.elements(field[i].fieldName),field[i].format,field[i].errorInfo);

}

else if(validatorType=="DateGroup"){

rs=validateDateGroup(theForm.elements(field[i].year),theForm.elements(field[i].month),theForm.elements(field[i].day),field[i].errorInfo);

}

else if(validatorType=="Checkbox"){

rs=validateCheckbox(theForm.elements(field[i].fieldName),field[i].errorInfo);

}

else if(validatorType=="Radio"){

rs=validateRadio(theForm.elements(field[i].fieldName),field[i].errorInfo);

}

else if(validatorType=="Select"){

rs=validateSelect(theForm.elements(field[i].fieldName),field[i].errorInfo);

}

else if(validatorType=="Email"){

rs=validateEmail(theForm.elements(field[i].fieldName),field[i].errorInfo);

}

else{

alert("验证类型不被支持, fieldName: "+field[i].name);

return false;

}

if(rs==false){

return false;

}

}

else{//一般验证

if(empty==false){

var v = field[i].validator; // 获取其validator属性

if(!v) continue; // 如果该属性不存在,忽略当前元素

var reg=new RegExp(v);

if(reg.test(field[i].value)==false){

alert(field[i].errorInfo);

field[i].focus();

return false;

}

}

}

}

for(i=0;i<disableList.length;i++){

disableList[i].disabled=true;

}

return true;

}

</script>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有