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


Posted in Javascript onMarch 24, 2007

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)});  
            }  
            );  
    }  
); 

下载相关例程代码
Javascript 相关文章推荐
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
AutoSave/自动存储功能实现
Mar 24 #Javascript
用 javascript 实现的点击复制代码
Mar 24 #Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 #Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 #Javascript
漂亮的提示信息(带箭头)
Mar 21 #Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 #Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 #Javascript
You might like
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python实现单词拼写检查
2015/04/25 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
python开发游戏的前期准备
2019/05/05 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
介绍一下write命令
2012/09/24 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
《观舞记》教学反思
2014/04/16 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
简单租房协议书
2014/10/21 职场文书
银行催款通知书
2015/04/17 职场文书
钱学森观后感
2015/06/04 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers