自己做jQuery开源插件之二：数据校验插件

最新推荐文章于 2024-04-20 11:50:28 发布

钱多多0970

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量891

点赞数

分类专栏： jQuery高级编程之插件文章标签： javascript jquery jquery插件 html web

本文链接：https://blog.csdn.net/u014227966/article/details/21640563

版权

jQuery高级编程之插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天讲一个我自认为设计的很好的插件——数据验证插件，刚进公司的时候，发现公司大大小小的项目对数据验证采取的方式五花八门，有的在后台验证，有的在前台验证，有的用微软自带的验证控件，有的直接在页面写js验证等等，我和经理反应了一下这个乱象，在经理的鼓舞下，我花了点时间写了这个jQuery数据验证插件，在页面上引用这个插件后，你可以验证整个页面或某个div里面的所有控件，包括验证必填项、验证日期、验证最大值最小值、验证邮箱、验证IP、验证正整数等等，只要你不断的扩展这个验证插件，它能为你验证一切！好了，下面进入正题：

首先，我们新建一个名为myCheckData.js文件，打开它，像上一篇那样先写好jQuery插件的标准框架，定义好自己插件的名称，如下所示：

(function ($) {
    $.fn.myCheckData= function () {
	//此处写插件核心代码
	return this;
    }
})(jQuery)

由于我们这个验证插件是验证整个页面或者某个html容器里的所有控件，比如说验证div的id是divtest里的所有控件，通过$("#divtest").myCheckData()这种方式调用，或者验证整个页面，通过$("*").myCheckData()这种方式调用，大家可以发现都是一个明确对象调用验证插件，所以我们不需要用return this.each...这种方式返回多个对象，直接用return this;返回一个对象即可。
ok，下面开始写验证方法，还是像上篇那样，我们把验证方法放在一个json对象里，方便调用，这里我就写几个验证方法给大家看一下，如下所示：

(function ($) {
    $.fn.myCheckData = function () {
        var CheckData = {
            Error: "",
            //***非空验证***//
            _require: function (item) {
                var require = item.attr("require");
                if (require == "true" && require != undefined && require != null && item.val() == "") {
                    CheckData.Error += "-" + item.attr("title") + "\n";
                    item.focus();
                }
            },
            //***最小值验证***//
            _min: function (item) {
                var min = item.attr("min");
                if (min != undefined && min != null && item.val() < parseInt(min)) {
                    CheckData.Error += "-" + item.attr("title") + "\n";
                    item.focus();
                }
            },
            //***最大值验证***//
            _max: function (item) {
                var max = item.attr("max");
                if (max != undefined && max != null && item.val() > parseInt(max)) {
                    CheckData.Error += "-" + item.attr("title") + "\n";
                    item.focus();
                }
            },
            //***正整数验证***//
            _isNum: function (item) {
                var reg = /^\d+$/;
                var number = item.attr("number");
                if (number == "true" && number != undefined && number != null && $.trim(item.val()).match(reg) == null) {
                    CheckData.Error += "-" + item.attr("title") + "\n";
                    item.focus();
                }
            }
        };
	//此处写插件核心代码
        return this;
    }
})(jQuery)

可以看到，在CheckData这个json对象里，我们放了四个验证方法和一个Error变量用来存放错误提示信息，代码不算难，应该都能看懂，很多人会问那个验证函数里attr("xxxx")都是些什么属性，还有attr("title")放的是什么信息，不急，往下看就知道了。
现在我们在主方法里调用上面的那些方法，调用代码如下所示：

//此处写插件核心代码
	CheckData.Error = "";
        this.find("input").each(function (index, item) {
            CheckData._require($(item));
            CheckData._min($(item));
            CheckData._max($(item));
            CheckData._isNum($(item));
        });

        this.data("result", CheckData.Error == "" ? true : false).data("info", CheckData.Error);
        return this;

代码中的this代表的是当前调用的对象，是一个jquery对象，不需要再用$(this)包裹，这里我们先遍历当前对象里的所有input控件，在each函数中，用遍历的对象逐个调用上面的四个验证方法，然后，我们用data()函数把验证结果保存在当前调用对象中，"result"用来保存验证结果是true还是false，"info"用来保存错误提示信息，至此，代码全部完成，下面我们可以在页面上测试一下，完整页面代码如下所示：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo.aspx.cs" Inherits="MyJqueryPlugin.数据校验.demo" %>

<!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">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="jcheck.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnCheck").click(function () {
                if ($("*").myCheckData().data("result") == true) {
                    alert("验证通过！");
                }
                else {
                    alert($("*").myCheckData().data("info"));
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divtest">
        <%--文本框不能为空--%>
        字段1：<input id="text1" type="text" require="true" title="字段1不能为空" />
        <br />
        <%--文本框有最小值限制--%>
        字段2：<input id="text2" type="text" min="10" title="字段2不能小于10" />
        <br />
        <%--文本框有最大值限制--%>
        字段3<input id="text3" type="text" max="100" title="字段3不能大于100" />
        <br />
        <%--文本框必须是正整数--%>
        字段4：<input id="text4" type="text" number="true" title="字段4必须是正整数" />
        <br />
        <input id="btnCheck" type="button" value="提交" />
    </div>
    </form>
</body>
</html>

写到这里，相信很多人才会发现原来代码里调用的控件的require、min、max、number属性都是我们自己定义的属性，根据这些属性，代码就可以判断如何验证这个控件，而title属性中存放的正是控件验证失败时的错误提示信息，上面的代码中我们验证了整个页面所有控件，即通过$("*").myCheckData()，我们也可以用$("#divtest").myCheckData()来验证divtest里所有的需要验证的控件，而不验证页面中其他容器里的控件，好了，我们来点击提交按钮，则会弹出如下错误信息：

只有当文本框输入值都符合要求后，才会弹出“验证通过”对话框，至此，整个验证插件的开发流程和使用都已交代完毕，该插件支持扩展，你只要自定义控件的属性，然后在插件代码中加入验证方法即可。欢迎大家提意见~~

钱多多0970

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己做jQuery开源插件之二：数据校验插件

今天讲一个我自认为设计的很好的插件——数据验证插件，刚进公司的时候，发现公司大大小小的项目对数据验证采取的方式五花八门，有的在后台验证，有的在前台验证，有的用微软自带的验证控件，有的直接在页面写js验证等等，我和经理反应了一下这个乱象，在经理的鼓舞下，我花了点时间写了这个jQuery数据验证插件，在页面上引用这个插件后，你可以验证整个页面或某个div里面的所有控件，包括验证必填项、验证日期、验证最
复制链接

扫一扫