JQuery 简便实现页面元素数据验证功能
2016-02-19 10:23
清醒时做事，糊涂时读书，大怒时睡觉，无聊时关注图老师为大家准备的精彩内容。下面为大家推荐JQuery 简便实现页面元素数据验证功能，无聊中的都看过来。
功能目标
通过简单的自定义属性值描述具体的验证功能，当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;iproperties.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)});
}
);
}
);
下载相关例程代码
