jqeury 无刷新 验证表单 各种简单好用

$(document).ready(function () {
    $(":submit,:image").each(function () {
        $(this).click(function () {
            var $bool = true;
            var group = $(this).attr("group");
            $(":input,select").each(function () {
                var $classValue = $(this).attr("class");
                //同组显示且在固定语法内
                if (group == $(this).attr("group") && $classValue != undefined) {
                    var $classStr = $classValue.split(' ');
                    $(this).change(function () {
                        $bool = $initializeSet(this, $classValue, $bool);
                    });
                    $bool = $initializeSet(this, $classValue, $bool);
                }
            });
            return $bool;
        });
    });



    //初始化内容
    function $initializeSet($id, $classValue, $boolean) {
        var $bool = $boolean;
        var $classStr = $classValue.split(' ');
        for (var i = 0; i < $classStr.length; i++) {
            var $className = $classStr[i].toString(); //获得样式表名
            var $fontId = "#p_" + $($id).attr("id");
            var $value = $.trim($($id).val()); //去空格获得当前验证标签的值
            if ($className == "qp_null_select") {
                $setRemove($fontId, $id);
                var $opthionValue = "0";
                var $prompt = $($id).attr("prompt"); //提示内容
                if ($($id).attr("oValue") != undefined) {
                    $opthionValue = $($id).attr("oValue");
                }
                if ($prompt == undefined) {
                    $prompt = "请选择...";
                }
                var $promptInfo = $promptMessage($id, $prompt);
                if ($($fontId).html() == null) {
                    $setAdd($id, $promptInfo);
                }
                if ($value == $opthionValue) {
                    $bool = false;
                }
                else {
                    $($fontId).remove();
                    $($id).removeClass(" class2");
                }
            }
            if ($className == "qp_null") {
                $setRemove($fontId, $id);
                var $prompt = $($id).attr("prompt"); //提示内容
                if ($prompt == undefined) {
                    $prompt = "请输入此字段!";
                }
                var $promptInfo = $promptMessage($id, $prompt);
                if ($($fontId).html() == null) {
                    $setAdd($id, $promptInfo);
                }
                if ($value == "") {
                    $bool = false;
                }
                else {
                    $($fontId).remove();
                    $($id).removeClass(" class2");
                }
            }
            if ($className == "qp_compare" && $value != "") {
                $setRemove($fontId, $id);
                var $prompt = $($id).attr("promptCompare"); //提示内容
                var $compareId = $($id).attr("compareId"); //获得比较标签的样式名;
                var $compareValue = $.trim($("." + $compareId).val()); //获得比较标签的值 并去掉空格
                var $promptInfo = $promptMessage($id, $prompt);
                if ($($fontId).html() == null) {
                    $setAdd($id, $promptInfo);
                }
                if ($value != $compareValue) {
                    $bool = false;
                }
                else {
                    $setRemove($fontId, $id);
                }
            }
            //此处添加要验证的正则表达式($regexStr正则的值);
            else if ($value != "") {
                switch ($className) {
                    case "qp_number":
                        var $regexStr = /^[0-9]*$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_ratio":
                        var $regexStr = /^[0-9]{1,2}$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_email":
                        var $regexStr = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_userName": //6-16位汉字、数字、字母、下划线
                        var $regexStr = /^[a-zA-Z0-9_\u4e00-\u9fa5]{6,16}$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_admin": //2-16位汉字、数字、字母、下划线
                        var $regexStr = /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,16}$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_pwd": //必须字母开头 6-16位数字、字母、下划线
                        var $regexStr = /^[a-zA-Z][a-zA-Z0-9_]{5,16}$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_mobile": //手机号码
                        var $regexStr = /(^((0[1,2]{1}\d{1}-?\d{8})|(0[3-9]{1}\d{2}-?\d{7,8}))$)|(^0?(13[0-9]|15[0-35-9]|18[0236789]|14[57])[0-9]{8}$)/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_qq": //qq号码
                        var $regexStr = /^[1-9]*[1-9][0-9]*$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_postCode": //邮政编码
                        var $regexStr = /^[1-9][0-9]{5}$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_img": //图片格式
                        var $regexStr = /.+(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_pwnumber":
                        var $regexStr = /0|(^[1-9]+\d*$)/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_money":
                        var $regexStr = /^-?(0|\d+)(\.\d+)?$/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                    case "qp_date":
                        var $regexStr = /((((0[0-9])(([02468][48])|([13579][26]))-0?2-29))|(((0[0-9])(([2468][048])|([13579][26]))-0?2-29))|(((0[1-9])(([02468][048])|([13579][26]))-0?2-29))|((([1-9][0-9])(([02468][048])|([13579][26]))-0?2-29))|((0[0-9][0-9][1-9])|(0[0-9][1-9][0-9])|(0[1-9][0-9][0-9])|([1-9][0-9][0-9][0-9]))-((((0?[1-9])|(1[0-2]))-((0?[1-9])|(1[0-9])|(2[0-8])))|((((0?[13578])|(1[02]))-31)|(((0?[1,3-9])|(1[0-2]))-(29|30)))))/;
                        $bool = $regexContent($fontId, $id, $regexStr, $value, $bool);
                        break;
                }
            }
        }
        return $bool;
    }

    /*-验证正则的内容 
    **-1.显示的标签对象
    **-2.当前的标签对象
    **-3.正则表达式
    **-4.当前标签的值
    **-5.验证是否成功-*/
    function $regexContent($fontId, $id, $regexStr, $value, $boolen) {
        var $bool = $boolen;
        $setRemove($fontId, $id);
        var $regex = $regexStr;
        var $prompt = $($id).attr("promptRegex"); //提示内容
        if ($prompt == undefined) {
            $prompt = "输入格式不正确!";
        }
        var $promptInfo = $promptMessage($id, $prompt);
        if ($($fontId).html() == null) {
            $setAdd($id, $promptInfo);
        }
        if (!$regex.test($value)) {
            $bool = false;
        }
        else {
            $setRemove($fontId, $id);
        }
        return $bool;
    }
    //设置显示提示内容
    function $setAdd($id, $promptInfo) {
        $($id).after($promptInfo);
        $($id).attr("class", $($id).attr("class") + " class2");
    }

    //设置移除提示内容
    function $setRemove($fontId, $id) {
        if ($($fontId).attr("id") != undefined) {
            $($fontId).remove();
            $($id).removeClass(" class2");
        }
    }

    //返回带样式的提示信息 --1.当前标签对象 2.提示信息
    function $promptMessage($id, $promptMess) {
        var $promptInfo = "<font id=\"p_" + $($id).attr("id") + "\" class='promptMessage'> *" + $promptMess + "</font>"; ;
        return $promptInfo;
    }
});

支持分组验证 支持扩展

<asp:TextBox ID="txb_EMail" promptRegex="正确格式:xx@bb.com" runat="server" class="qp_null qp_email qp_exist text r3"></asp:TextBox>

<asp:ImageButton ID="btn_Register" runat="server" ImageUrl="~/images/loginreg_smt.png" class="sub"  />

注意 只对 input标签 type为 submit 和 image的按钮有效  想其他也有效 可以在按钮点击事件中扩展 prompt的属性为提示内容(可自定义修改) promptRegex的属性为正则

验证提示内容(可自定义修改) 也可以自定义规则 进行验证

有不足之处 多多指教

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值