您的位置:首页 > Web前端 > JavaScript

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

2008-01-03 11:09 881 查看
代码:<!--

使用时请将下面的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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: