Arthur's Blog

    jQuery的应用十分广泛，从最早的PC网站，异步请求、交互效果等，到现在的移动网站，jQuery目前已经迭代到 v3.6.1版本，功能也是越来越强大，本文将介绍通过设置元素的验证规则，遍历表单属性，来实现通用的验证，并实现表单的异步提交。

    首先，第一步，我们将验证绑定到提交按钮，并将表单的sumit设置成return false避免跳过验证直接提交，我们一起来看一下这里的html源代码。

     <form method="POST" onsubmit="return false" data-callback="window.location.href='/';">
    <div class="list-group list-group-sm">
        <div class="list-group-item">
            <input placeholder="昵称" name="nickname" class="form-control no-border" maxlength="30" rules="^([0-9a-zA-Z]){6,20}" required>
        </div>
        <div class="list-group-item">
            <input type="email" name="email" placeholder="邮箱" class="form-control no-border" ng-model="user.email" maxlength="50" rules="^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$" required>
        </div>
        <div class="list-group-item">
            <input type="password" name="password" placeholder="密码" class="form-control no-border" ng-model="user.password" rules="^([a-zA-Z0-9,.;:~!@#$%^&\-\_\*]+){6,20}" required>
        </div>
        <button type="submit" class="btn btn-lg btn-info btn-block btn-ajaxForm">注册</button>
    </div>
    </form>

    <script>
        $(function() {
            $('body').on('click', '.btn-ajaxForm', function(){

                //这里是我们要去执行的操作，如：表单验证，异步提交，异步成功/失败回调
        });
    </script>

   第二步：我们要实现Form验证，异步提交、异步成功/失败回调

        查找提交按钮所在的form表单，所以这个提交按钮必须是在form表单里边。
        //从当前的parent查找，超过5级没查到就放弃, 并报错
       $('body').on('click', '.btn-ajaxForm',
            function() {
                //从当前的parent查找，超过5级没查到就放弃, 并报错
                var $formObj = $(this);
                for (var i = 0; i < 5; i++) {
                if ($formObj[0].nodeName == 'FORM') {
                    break;
                }
                $formObj = $formObj.parent();
        }
        if ($formObj[0].nodeName != 'FORM') {
            trz.toast.warning('没有找到你要提交的表单');
            return;
        }

        //关键点，验证表单
        var valid = trz.form.valid($formObj);
        if (!valid) {
            trz.toast.warning('验证失败，我们已经为您高亮输入错误的地方');
            return;
        }
        if ($('#trzAgree').length > 0 && !$('#trzAgree').hasClass('trzChecked')) {
                trz.toast.warning('您需要查看并同意服务条款才能继续');
            return;
        }
        var callback = $formObj.data('callback');
        var start = $formObj.data('start');
        var fail = $formObj.data('fail');
        var url = $formObj.attr('action');
        if (url.indexOf('isAjax=1') == -1) {
            url += url.indexOf('?') == -1 ? '?isAjax=1': '&isAjax=1';
       }

       var handleBySelf = $formObj.data('handlebyself') || 0;
        var params = {
                url: url,
                type: $formObj.attr('method'),
                dataType: "json",
                beforeSend: function(){
                if(start) {
                    eval(start);
                }
        },
            success: function(msg) {
                if (msg == null) {
                        trz.toast.warning('操作失败');
                }else if(handleBySelf) {
                    if (callback) {
                        eval(callback);
                    }
            } else if (msg.code > 0) {
                var toast = msg.msg;
                if (msg.errorInfo) {
                    toast = '';
                    for (var i in msg.errorInfo) {
                        toast += msg.errorInfo[i] + "\n";
                    }
            }
            trz.toast.warning(toast);
        } else {
                trz.toast.success(msg.msg);
                setTimeout(function() {
                if (callback) {
                    eval(callback);
                }
            },
            2000);
            }
        },
        error: function() {
                trz.toast.warning('操作失败');
                if(fail) {
                    eval(fail);
                }
            }
        };

       // 验证通过，提交Form
        $formObj.ajaxSubmit(params);
                return false;
    });

    第三步：表单验证的实现
    trz.form = {};
    //form 验证
    trz.form.data = {};
    trz.form.valid = function($formObj) {
        trz.form.data['valid'] = trz.form.data['valid'] | {};
        var formValid = true;
        $formObj.find('input,select,textarea').each(function() {
        var valid = true;
        var rules = $(this).attr('rules');
        var verify = $(this).attr('verify') || (rules ? 'true': 'false');

        var val = $(this).val();
        var length = val.length;
        var maxlength = ~~$(this).attr('maxlength');
        var equal = $(this).attr('equal');
        //如果是必须填写，但是没有指定规则只验证是否为空
        if (verify == 'true' && !rules) {
            if (length == 0) valid = false;
                rules = "[\\W\\w]{1,}";
        }
        if (rules) {
            //verify 为false的时候，跳过为空的情况，如果不为空就验证rules
            if (verify == 'true' || (verify == 'false' && length > 0)) {
                valid = new RegExp(rules).test(val) || (maxlength > 0 && length > maxlength);
            }
            if($(this).attr('type') == 'checkbox' || $(this).attr('type') == 'radio') {
            var name = $(this).attr("name");
            name = name.replaceAll(/\[/g, "\\[");
            name = name.replace(/\]/g, "\\]");
            if($("input[name=" + name +"]:checked").length == 0) {
                $("input[name=" + name +"]").parent().find("i").addClass('highlight-error');
                $(this).on('change',
                    function() {
                        $("input[name=" + name +"]").parent().find("i").removeClass('highlight-error');
                    });
                    formValid = false;
                }
            }
        }
        if (equal && $formObj.find('input[name="' + equal + '"]').val() != val) {
            valid = false;
        }

        if (!valid) {
                formValid = valid;
                $(this).addClass('highlight-error');
            } else {
                $(this).removeClass('highlight-error');
        }
        $(this).on('input',
            function() {
                $(this).removeClass('highlight-error');
        });
        $(this).on('change',
            function() {
                $(this).removeClass('highlight-error');
            });
            trz.form.data['valid'][$(this).attr('name')] = val;
        });
        return formValid;
    }