login.png

如上图所示：公司注册页面中有个发送验证码，用remote远程验证此邮箱是否被注册，刚开始是控制台报错，大概是success位定义，后来找出原因是因为jq版本的问题，改过之后发现remote返回false之后就不走success 和 error 函数了。查找半天资料没有查出改用什么解决方法。

于是想出一个办法，实时的监听输入框父元素的class属性（因input验证出错，form-group会加上一个has-error的属性值）

下面是bs验证部分的代码

$('#regForm')
        .formValidation({
            message: '请求超时，请稍后重试',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                niceName: {
                    // message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: '昵称不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,15}$/,
                            message: '长度为2~15位，支持中英文和数字'
                        }
                    }
                },
                email: {
                    verbose: false, //代表验证按顺序验证。验证成功才会下一个（验证成功才会发最后一个remote远程验证）
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '请输入正确的邮箱'
                        },
                        remote: {
                            type: 'POST',
                            url: '/user/account',
                            message: '此邮箱已被注册'
                        }


                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_?.,/！@#￥%$^&*()=+~`!'"，。、？“‘；：;:|【】{}[><-]{8,16}$/,
                            message: '长度为8~16位字符，支持数字、大小写字母和标点符号'
                        }
                    }
                },
                checkMail:{
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*$/,
                            message: '验证码错误，请检查您是否输入了空格'
                        }
                    }
                }
            }
        })
        .on('success.form.fv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Use Ajax to submit form data
            $.post("/user/register", $form.serialize(), function(result) {
                if(result.status == 200){
                    document.cookie = "token="+ result.data +";path=/;domain=.mgocr.com";
                    window.location.href='http://www.mgocr.com/';
                }
                 else{
                    notie.alert(3, result.msg, 2);
                    $("#registerBtn").removeClass("disabled").removeAttr("disabled");
                }
            }, 'json');
        });

接下来是监听部分的代码

注意：这里有个坑，验证是监听输入框的事件，如果我们也用监听input事件就错了，因为事件是同一时间发生，所有它要比class属性值变化慢半拍，所有这里我们用keyup事件(键盘事件顺序：keydown - > keypress - > keyup)

$(".emailValidate").keyup(function () {  // 监听邮箱输入框中的值，如果form-group的属性中有has-error属性，按钮既不可用
        if($(this).parents(".form-group").hasClass("has-error")){
            $("#sendCodeToEmail").addClass("disabled");
        }else{
            $("#sendCodeToEmail").removeClass("disabled");
        }
});