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

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

下载相关例程代码

(0)

相关推荐

  • Jquery插件实现点击获取验证码后60秒内禁止重新获取

    通过jquery.cookie.js插件可以快速实现"点击获取验证码后60秒内禁止重新获取(防刷新)"的功能 效果图: 先到官网(http://plugins.jquery.com/cookie/)下载cookie插件,放到相应文件夹,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&qu

  • jquery无刷新验证邮箱地址实现实例

    今天在开发的时候.需要在一个用户验证邮箱.但是使用了传统的js无刷新需要清空浏览器缓存后才能正常的验证所以自己就去用jquery 去写一个了无刷新验证 看看 复制代码 代码如下: <script type="text/javascript">var ee;function  mailbox(strEmail){var name=document.blooger[0].email.value;$.ajax({ type: "get", url: "

  • 基于jQuery实现表单提交验证

    html表单代码: 复制代码 代码如下: <form method="post" action="">        <div class="int">           <label for="username">用户名:</label>           <input type="text" id="username" cla

  • jQuery验证元素是否为空的两种常用方法

    本文实例讲述了jQuery验证元素是否为空的两种常用方法.分享给大家供大家参考.具体如下: 下面提供了两种方法用于检查指定id的元素的内容是否为空 // 方法一 if (!$('#jb51').html()) { //http://www.jb51.net 什么都没有找到; } // 方法二 if ($('#jb51').is(":empty")) { //http://www.jb51.net 什么都没有找到; } 希望本文所述对大家的jQuery程序设计有所帮助.

  • jquery使用正则表达式验证email地址的方法

    本文实例讲述了jquery使用正则表达式验证email地址的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jquery使用正则表达式验证email地址</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type=&qu

  • jquery 提交值不为空的元素示例代码

    jquery 提交值不为空的元素 可以用来查询的时候用 具体代码: 复制代码 代码如下: //在执行查询的时候,如果表单的字段为空 就不进行提交 $("#form1").submit(function(){ try { $(this).find("*").each(function(){ var elem = $(this); if (elem.prop("name") != null&&elem.prop("name&

  • jQuery 删除或是清空某个HTML元素示例

    jQuery使用下面两个方法来删除或是清空某个HTML元素. remove() – 删除指定的元素(包括其子元素) empty() – 清空指定元素的子元素 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&q

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

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

  • jQuery实现动态控制页面元素的方法分析

    本文实例讲述了jQuery实现动态控制页面元素的方法.分享给大家供大家参考,具体如下: 背景 最近做了一个小系统,其中需要在页面对用户的好友进行增删改查.本来没有那么复杂,用表格形式就可以相对容易的实现. 但是考虑到用户的体验度,首先添加尽量不想用输入,就采用将所有用户分类显示,然后点击即可添加. 添加的用户同时在界面显示,显示出用户当前的好友.同时点击已经添加好的好友可进行下一部的业务操作. 当然,删除的操作是仿照手机端那样,右上角有一个红色的"x",点击该好友即可删除. 最后界面还

  • jQuery基于正则表达式的表单验证功能示例

    本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • jQuery扩展+xml实现表单验证功能的方法

    本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new

  • jQuery简单实现页面元素置顶时悬浮效果示例

    本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(wi

  • JavaScript使用简单正则表达式的数据验证功能示例

    本文实例讲述了JavaScript使用简单正则表达式的数据验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • 基于Bootstrap 3 JQuery及RegExp的表单验证功能

    昨天小编在研究regexp,今天小编抽空给大家分享表单验证. 主要功能: 用户名必须在5-25个字符之内,而且只能使用字母.数字或下划线,否则不让通过. 密码必须在5-25个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过. 根据不同密码程度,下面的low.medium和high会改变背景颜色. 确认密码就不说啦. 验证码只是做了个样子,反正就是设成必须是5个数字. checkbox必须打勾啦,不然不让通过. 点击注册按钮,会有相应的提示框(可关闭)弹出. HTML: <body>

  • Android实现页面短信验证功能

    本文实例为大家分享了Android实现页面短信验证功能的具体代码,供大家参考,具体内容如下 目标效果: 上一篇博文介绍的是使用SDK中自带的验证页面,需要进行多次跳转,并且项目需要添加两个框架,多有不便,这个例子简化了短信验证的代码,但是不足的是功能不如原本那个完善. 1.新建项目,找到上一次下载的SDK文件中包含的SMSSDK项目,复制lib目录下的三个jar包,res目录下的raw文件夹和values目录下的两个xml文件到本项目. 2.activity_main.xml页面设置布局. ac

  • jQuery实现的页面详情展开收起功能示例

    本文实例讲述了jQuery实现的页面详情展开收起功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现页面详情展开收起</title> <style> .detailpd { padding-top:10px; } </style> <script src=&q

  • jQuery ajax MD5实现用户注册即时验证功能

    实际项目中比较常用的(JQuery+AJAX+MD5),属于即时验证,亮点是验证用户是否存在的那一项,具体内容如下 具体示例 registe.jsp <span style="font-size: large;"><%@ page pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"

随机推荐