JQuery 简便实现页面元素数据验证功能
2024-09-06 12:42:53
供稿：网友
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)
