表单验证之jquery篇

发布时间:2019-05-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了表单验证之jquery篇脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

验证代码:

function valid(form, validateArray){
        VAR fnArray = [];
        $.each(validateArray, function(i, ITem){
            var input = $(form[item.name]);
            var errMsg = input.parent().find(".err-tip");
            function fn(){
                var val = input.val();
                if(item.requireMsg && (val == '' || val == input.attr("placeholder"))){
                    errMsg.htML(item.requireMsg);
                    return false;
                }

                if(item.reg && !item.reg.test(val)){
                    errMsg.html(item.regMsg);
                    return false;
                }

                return true;
            }
            fnArray.push(fn);
            input.on("blur", function(){
                fn();
            });
        });

        $(form).on("submit", function(){
            var ok = true;
            $.each(fnArray, function(i,fn){
                var res = fn();
                if(!res){
                    ok = res;
                }
            });

            return ok;
        });
    }

js使用方式:

var validateArray = [
    {
        name: "uname",
        requireMsg: "申请人姓名不为空"
    },
    {
        name: "uIDCard",
        requireMsg: "身份证号码不为空",
        reg: /(^d{15}$)|(^d{17}([0-9]|X)$)/,
        regMsg: "请输入正确的身份证号"
    }
];
valid($("#feedbackform")[0], validateArray);

总结:
这样写验证代码,有一个比较大的好处就是:所有的验证都用同一个函数实现,可复用性强,并且下次再写同样的验证,只需要在validateArray数组里面添加对应的验证规则即可。

脚本宝典总结

以上是脚本宝典为你收集整理的表单验证之jquery篇全部内容,希望文章能够帮你解决表单验证之jquery篇所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。