简单的jquery验证插件

        一直想自己写一个通用的验证组件,苦无没有合适的样式不够美观。直到逛园子看到了一个jQuery插件Poshy Tip。终于把这个验证主键做得还算过的去吧。下面先放一个Demo:

不能为空: 邮件格式:
整数: 固定电话:
自定义验证:
正则式: 提示语:

       目前只写了几个常用的验证,好在可以支持自定义正则表达式的验证,也算是能用了。下面贴一下用法了;

       这个脚本通过设定自定义属性来判断,要验证那种类型,如:

  <input type="text" isrequired="1"> 代表是必填项。
   <input type="text" JudgeType="IsEmail"> 代表验证邮件格式。
   等等我会给个附件下载,JudgeType的类型都在里面 这边我就不多做解释了
当这些都设置好以后 在提交按钮里面 调用方法 __DoCheck(obj)   这边的obj 是这些表单所属的父亲DOM对象  比如 可以传入一个table     __DoCheck($("#tableId")) 如果返回false就是验证失败
反之则是成功!

还有这个组件是基于JQuery的 就是说在引用这个组件的时候必须在它之前引用JQuery文件 附件包里面会有一个Validator.js文件。要使用的时候 在JQuery 文件下面引用
Validator.js这个文件之后按上面的步骤设置好 它就能验证了。

  Validator里面的主要代码:

        

function __DoCheck(obj) {

    var flag = true;

    $.each($(obj).find("input[isrequired=1],textarea[isrequired=1],select[isrequired=1]"), function (i, n) {//循环读要验证空的对象

        $(n).poshytip('destroy');

        if ($.trim($(n).val()) == "") {

            __showPoshytip($(n), "该字段不能为空!!");//如果为空弹出提示  

            flag = false;//标记有个为空了

            return false;//跳出循环

        }

    });

    if (!flag) {

        return flag;//返回false

    }

    var strMsg = "";

    $.each($(obj).find("input[JudgeType],textarea[JudgeType]"), function (i, n) {

        $(n).poshytip('destroy');

        switch ($(n).attr("JudgeType")) {

            case "IsInteger": //整数

                flag = __checkIsInteger($(n).val());

                strMsg = "请输入整数!";

                break;

            case "IsDouble":

                flag = __checkIsDouble($(n).val());

                strMsg = "请输入浮点数!";

                break;

            case "IsValidDate":

                flag = __checkIsValidDate($(n).val());

                strMsg = "请输入日期型!";

                break;

            case "IsEmail":

                flag = __IsEmail($(n).val());

                strMsg = "请输入正确的邮箱格式!";

                break;

            case "IsIDCard":

                flag = __IsIDCard($(n).val());

                strMsg = "请正确的身份证格式!";

                break;

            case "IsTelephone":

                flag = __IsTelephone($(n).val());

                strMsg = "请正确的固定电话格式!";

                break;

            case "CheckMask":

                flag = __checkMask($(n).val(), $(n).attr("pattern"));

                strMsg = $(n).attr("strMsg");

                break;

        }

        if (!flag) {

            __showPoshytip($(n), strMsg);

            return flag;

        }

    });

    if (!flag) {

        return flag;

    }

    return true;

}

function __showPoshytip(obj, msg) {//PoshyTip插件的显示

    $(obj).poshytip('destroy');

    $(obj).poshytip({

        className: 'tip-yellow',

        content: msg,

        showOn: 'none',

        alignTo: 'target',

        alignX: 'inner-left',

        offsetX: 0,

        offsetY: 5

    });

    $(obj).poshytip('show');

    $(obj).focus();

    $(obj).bind('blur', function () {

        $(this).poshytip('hide');

        $(this).poshytip('destroy');

        $(this).unbind();

    });

}

代码比较简单到时候下载了,应该都能看得懂,那我就不废话了。下面

插件 Validator(通用页面输入数据验证)

你可能感兴趣的:(jquery)