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

JQuery简便实现页面元素数据验证功能

2007-02-27 12:34 1051 查看
ASP.NET提供了丰富的数据验证控件,但这个验证功能都必须运用在服务器控件中;在复合验证数据时使用也不是很方便(虽然拖放控件很方便,但拖放数增多和设置相关属性就变得很麻烦的事情)。为了更方便灵活地实现验证功能,于是采用了JQuery编写了一个简单验证组件,在使用时只需要简单的描述一下验证规则,并不需要写一句JavaScript就可以实现具备ASP.NET验证控件的功能(当然页面要引入相关JavaScript文件)。

功能目标

通过简单的自定义属性值描述具体的验证功能,当Form提交自动拦载执行验证功能。如果所有成员验证成功就提交,否则取消提交。

简单使用描述:

<input id="Text1" type="text" validator="type:string;nonnull:true;tip:请输入用户名!;tipcontrol:nametip" />

<input id="Text2" type="text" validator="type:date;nonnull:true;tip:请输入正确的出生日期!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />

实现要点

利用JQuery提供的素元查找功能,方便查找出需要验证的元素对象;通过$(document).ready事件进很验证代码的初始化和执行的切入工作。

定义验证规则描述属性,在初始化时对相关验证描述进行分解和集成处理。

拦载Form提交过程进行验证处理,根据情况确定是否提交数据。

元素对象在发生onchange事件时自动执行验证处理功能。

通过alert和自定义区域显示错误信息。

具体JavaScript代码

实现代码并不复杂只有几百行,由于相关代码比较简单所以没有编写注解.

具体代码:

// JScript 文件

//<validator>

//type:int|number|date|string

//nonnull:true|false

//regex:^[-\+]?\d+$

//min:0

//max:999999999

//campare:id

//comparetype:eq,neq,leq,req,le,ri

//tipcontrol:

//tip:

//</validator>

var ErrorMessage;

function FormValidate(form)

{

ErrorMessage='';

var legality,items;

legality = true;

items = $(form).find("input[@validator]");

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

{

if(legality)

{

legality = OnItemValidator($(items[i]));

}

else

{

OnItemValidator($(items[i]));

}

}

items = $(form).find("textarea[@validator]");

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

{

if(legality)

{

legality = OnItemValidator($(items[i]));

}

else

{

OnItemValidator($(items[i]));

}

}

items = $(form).find("select[@validator]");

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

{

if(legality)

{

legality = OnItemValidator($(items[i]));

}

else

{

OnItemValidator($(items[i]));

}

}

if(!legality)

{

if(ErrorMessage !='')

alert(ErrorMessage);

}

return legality;

}

function CreateValObject(validator)

{

var valobj = { type:'string',

nonnull:false,

regex:null,

min:null,

max:null,

campare:null,

comparetype:null,

tipcontrol:null,

tip:null};

var properties;

var execute;

var namevalue;

properties = validator.split(';');

for(i=0;i<properties.length;i++)

{

namevalue = properties[i].split(':');

execute ="valobj." + namevalue[0] +'=\''+ namevalue[1]+'\';';

eval(execute);

}

return valobj;

}

function OnItemValidator(control)

{

var regex,maxvalue,minvalue,cvalue;

var valobj = CreateValObject(control.attr('validator'));

var value = control.val();

value = ValidatorConvert(value,valobj.type);

if(valobj.nonnull=="true")

{

if(value == null || value=="")

{

ValidatorError(valobj);

return false;

}

}

else

{

if(value == null || value=="")

return true;

}

if(valobj.regex != null)

{

regex =new RegExp(valobj.regex);

if(value.match(regex) == null)

{

ValidatorError(valobj);

return false;

}

}

if(valobj.min != null)

{

minvalue = ValidatorConvert(valobj.min,valobj.type);

if(!CompareValue(value,minvalue,"req"))

{

ValidatorError(valobj);

return false;

}

}

if(valobj.max != null)

{

maxvalue = ValidatorConvert(valobj.max,valobj.type);

if(!CompareValue(value,maxvalue,"leq"))

{

ValidatorError(valobj);

return false;

}

}

if(valobj.campare != null)

{

cvalue = $('#' + valobj.campare).val();

cvalue = ValidatorConvert(cvalue,valobj.type);

if(!CompareValue(value,cvalue,valobj.comparetype))

{

ValidatorError(valobj);

return false;

}

}

return true;

}

function ValidatorError(valobj)

{

if(valobj.tipcontrol != null)

showTip($("#"+ valobj.tipcontrol));

else

{

if(ErrorMessage !='')

ErrorMessage += '\n';

ErrorMessage += valobj.tip;

}

}

function CompareValue(leftvalue,rightvalue,compareType)

{

if(leftvalue == null || rightvalue == null)

return false;

if(compareType=="eq")

{

return leftvalue == rightvalue;

}

else if(compareType =="neq")

{

return leftvalue != rightvalue;

}

else if(compareType =="le")

{

return leftvalue < rightvalue;

}

else if(compareType =="leq")

{

return leftvalue <= rightvalue;

}

else if(compareType =="ri")

{

return leftvalue > rightvalue;

}

else if(compareType =="req")

{

return leftvalue >= rightvalue;

}

else

{

return false;

}

}

function showTip(control)

{

if(control.attr('show') != 'on')

{

control.fadeIn("slow");

control.attr('show','on');

}

}

function hideTip(control)

{

control.hide();

control.attr('show','');

}

function ValidatorConvert(value, dataType) {

var num,exp,m;

var year,month,day

if(value == null || value =="")

return null;

if(dataType=="int")

{

exp=/^[-\+]?\d+$/;

if (value.match(exp) == null)

return null;

num = parseInt(value, 10);

return (isNaN(num) ? null : num);

}

else if(dataType =="number")

{

exp=/^[-\+]?((\d+)|(\d+\.\d+))$/;

if (value.match(exp) == null)

return null;

num = parseFloat(value);

return (isNaN(num) ? null : num);

}

else if(dataType =="date")

{

exp=/^(\d{4})([-/]?)(\d{1,2})([-/]?)(\d{1,2})$/

m = value.match(exp);

if (m == null)

{

exp=/^(\d{1,2})([-/]?)(\d{1,2})([-/]?)(\d{4})$/

m = value.match(exp);

if(m== null)

return null;

year = m[5];

month = m[1];

day =m[3];

}

else

{

year = m[1];

month =m[3];

day = m[5];

}

try

{

num = new Date(year,month,day);

}

catch(e)

{

return null;

}

return num;

}

else

{

return value.toString();

}

}

$(document).ready(

function(){

$("[@validator]").each(function(i)

{

var valobj = CreateValObject($(this).attr('validator'));

if(valobj.tipcontrol !=null)

{

$('#' + valobj.tipcontrol).addClass('ErrorTip');

hideTip($('#' + valobj.tipcontrol));

$("#"+ valobj.tipcontrol).html("<NOBR>"+valobj.tip+"</NOBR>");

}

$(this).change(function(){

if(OnItemValidator($(this)))

{

if(valobj.tipcontrol !=null)

{

hideTip($('#' + valobj.tipcontrol));

}

}

else

{

if(valobj.tipcontrol !=null)

{

showTip($('#' + valobj.tipcontrol));

}

}

});

}

);

$("form").each(function(id)

{

$(this).submit(function(){return FormValidate(this)});

}

);

}

);

下载相关例程代码
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐