JQuery 簡(jiǎn)便實(shí)現(xiàn)頁(yè)面元素?cái)?shù)據(jù)驗(yàn)證功能
更新時(shí)間：2007年03月24日 00:00:00 作者：
ASP.NET提供了豐富的數(shù)據(jù)驗(yàn)證控件，但這個(gè)驗(yàn)證功能都必須運(yùn)用在服務(wù)器控件中；在復(fù)合驗(yàn)證數(shù)據(jù)時(shí)使用也不是很方便（雖然拖放控件很方便，但拖放數(shù)增多和設(shè)置相關(guān)屬性就變得很麻煩的事情）。為了更方便靈活地實(shí)現(xiàn)驗(yàn)證功能，于是采用了JQuery編寫(xiě)了一個(gè)簡(jiǎn)單驗(yàn)證組件，在使用時(shí)只需要簡(jiǎn)單的描述一下驗(yàn)證規(guī)則，并不需要寫(xiě)一句JavaScript就可以實(shí)現(xiàn)具備ASP.NET驗(yàn)證控件的功能（當(dāng)然頁(yè)面要引入相關(guān)JavaScript文件）。
功能目標(biāo)
通過(guò)簡(jiǎn)單的自定義屬性值描述具體的驗(yàn)證功能，當(dāng)Form提交自動(dòng)攔載執(zhí)行驗(yàn)證功能。如果所有成員驗(yàn)證成功就提交，否則取消提交。
簡(jiǎn)單使用描述：
<input id="Text1" type="text" validator="type:string;nonnull:true;tip:請(qǐng)輸入用戶名!;tipcontrol:nametip" />
<input id="Text2" type="text" validator="type:date;nonnull:true;tip:請(qǐng)輸入正確的出生日期!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />
實(shí)現(xiàn)要點(diǎn)
利用JQuery提供的素元查找功能，方便查找出需要驗(yàn)證的元素對(duì)象;通過(guò)$(document).ready事件進(jìn)很驗(yàn)證代碼的初始化和執(zhí)行的切入工作。
定義驗(yàn)證規(guī)則描述屬性,在初始化時(shí)對(duì)相關(guān)驗(yàn)證描述進(jìn)行分解和集成處理。
攔載Form提交過(guò)程進(jìn)行驗(yàn)證處理，根據(jù)情況確定是否提交數(shù)據(jù)。
元素對(duì)象在發(fā)生onchange事件時(shí)自動(dòng)執(zhí)行驗(yàn)證處理功能。
通過(guò)alert和自定義區(qū)域顯示錯(cuò)誤信息。
具體JavaScript代碼
實(shí)現(xiàn)代碼并不復(fù)雜只有幾百行，由于相關(guān)代碼比較簡(jiǎn)單所以沒(méi)有編寫(xiě)注解.
具體代碼：
// 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)});
}
);
}
);
下載相關(guān)例程代碼
功能目標(biāo)
通過(guò)簡(jiǎn)單的自定義屬性值描述具體的驗(yàn)證功能，當(dāng)Form提交自動(dòng)攔載執(zhí)行驗(yàn)證功能。如果所有成員驗(yàn)證成功就提交，否則取消提交。
簡(jiǎn)單使用描述：
復(fù)制代碼 代碼如下:
<input id="Text1" type="text" validator="type:string;nonnull:true;tip:請(qǐng)輸入用戶名!;tipcontrol:nametip" />
<input id="Text2" type="text" validator="type:date;nonnull:true;tip:請(qǐng)輸入正確的出生日期!;tipcontrol:birthtip;min:1950-1-1;max:2000-1-1" />
實(shí)現(xiàn)要點(diǎn)
利用JQuery提供的素元查找功能，方便查找出需要驗(yàn)證的元素對(duì)象;通過(guò)$(document).ready事件進(jìn)很驗(yàn)證代碼的初始化和執(zhí)行的切入工作。
定義驗(yàn)證規(guī)則描述屬性,在初始化時(shí)對(duì)相關(guān)驗(yàn)證描述進(jìn)行分解和集成處理。
攔載Form提交過(guò)程進(jìn)行驗(yàn)證處理，根據(jù)情況確定是否提交數(shù)據(jù)。
元素對(duì)象在發(fā)生onchange事件時(shí)自動(dòng)執(zhí)行驗(yàn)證處理功能。
通過(guò)alert和自定義區(qū)域顯示錯(cuò)誤信息。
具體JavaScript代碼
實(shí)現(xiàn)代碼并不復(fù)雜只有幾百行，由于相關(guān)代碼比較簡(jiǎn)單所以沒(méi)有編寫(xiě)注解.
具體代碼：
復(fù)制代碼 代碼如下:
// 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)});
}
);
}
);
下載相關(guān)例程代碼
您可能感興趣的文章:
- jQuery 判斷頁(yè)面元素是否存在的代碼
- JQuery顯示隱藏頁(yè)面元素的方法總結(jié)
- jQuery獲得頁(yè)面元素的絕對(duì)/相對(duì)位置即絕對(duì)X,Y坐標(biāo)
- jQuery獲取頁(yè)面元素絕對(duì)與相對(duì)位置的方法
- jquery獲得頁(yè)面元素的坐標(biāo)值實(shí)現(xiàn)思路及代碼
- jQuery頁(yè)面元素動(dòng)態(tài)添加后綁定事件丟失方法,非 live
- jQuery實(shí)現(xiàn)動(dòng)態(tài)控制頁(yè)面元素的方法分析
- jQuery使用之處理頁(yè)面元素用法實(shí)例
- jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)鎖定頁(yè)面元素(表格列)
相關(guān)文章
jQuery EasyUI 折疊面板accordion的使用實(shí)例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了jquery點(diǎn)擊縮略圖切換視頻播放，我們可以點(diǎn)擊縮略圖切換不同的視頻進(jìn)行播放，過(guò)去是實(shí)現(xiàn)圖片切換現(xiàn)在有進(jìn)一步實(shí)現(xiàn)視頻切換，感興趣的小伙伴可以參考下。2015-09-09
使用id，這個(gè)方法可以在生成html的時(shí)候動(dòng)態(tài)設(shè)置tr的id，也是用得最多最簡(jiǎn)單的一種，其他方法祥看本文2014-06-06
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 從 1.9 版開(kāi)始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support，下面我們來(lái)看下具體的使用方法2014-05-05
這篇文章主要介紹了JQuery中Bind()事件用法,實(shí)例分析了Bind()事件的功能、特點(diǎn)與綁定事件時(shí)的使用技巧,需要的朋友可以參考下2015-05-05
Jquery的cookies插件，感覺(jué)不錯(cuò)，但是跟蹤調(diào)試的時(shí)候發(fā)現(xiàn)cookies上面還是多寫(xiě)了一個(gè)相同名稱的值，這就麻煩了，后來(lái)看到網(wǎng)上有人說(shuō)用這個(gè)方法，感覺(jué)還不錯(cuò)2010-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery多選框選擇數(shù)量限制方法，最多選擇 三項(xiàng) 的上限已滿, 其他選項(xiàng)將會(huì)變?yōu)椴豢蛇x2017-02-02
jQuery添加新內(nèi)容的四個(gè)常用方法分析【append，prepend，after，before】
這篇文章主要介紹了jQuery添加新內(nèi)容的四個(gè)常用方法,結(jié)合實(shí)例形式分析了jQuery元素添加append，prepend，after，before四種方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2019-03-03
jquery列表拖動(dòng)排列(由項(xiàng)目提取相當(dāng)好用)
最好的jquery列表拖動(dòng)排列自定義拖動(dòng)層排列。當(dāng)點(diǎn)擊或拖動(dòng)列表時(shí)，可以自定義隨意拖放列表模塊到相應(yīng)位置2014-06-06
CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了CSS3 media queries結(jié)合jQuery實(shí)現(xiàn)響應(yīng)式導(dǎo)航,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09