表单中含有AJAX验证问题的异步解决方案

表单中含有AJAX验证问题的异步解决方案

功能:验证码正确与否以及验证码不正确无法submit

HTML代码

JavaScript代码

    // ajax异步解决方案
    $(document)
        .ajaxStart(function(){
            $("button:submit").addClass("log-in").attr("disabled", true);
        })
        .ajaxStop(function(){
            $("button:submit").removeClass("log-in").attr("disabled", false);
        });
    // 验证码验证
    var checkBool = false;
    $('.verifyImg').blur(function(){
        var data = {checkCode: this.value}
        console.log(data);
        $.ajax({
            url: '{:U("user/check")}',
            type: 'POST',
            dataType: 'json',
            data: data,
            success: function(data){
                if(data.status == 2){
                    $('.text-warning').text(data.msg);
                    $('#verifyImg').click(); 
                    checkBool = true;
                }else{ 
                    $('.text-warning').text('');
                }
            }
        })
    })
    // 表单项不能为空
    function myCheck(){
        var username = document.getElementById('inputusername'); 
        var password = document.getElementById('inputpassword'); 
        var verify = document.getElementById('inputverify'); 
        
        if(username.value == ''){
            $('.username_text').text('请输入用户名!');
            return false;
        }else if(password.value == ''){
            $('.password_text').text('请输入密码!');
            return false;
        }else if(verify.value == ''){
            $('.text-warning').text('请输入验证码!');
            return false;
        }else if(checkBool){
            return false;
        }else{
            return true;
        }
    }

你可能感兴趣的:(表单中含有AJAX验证问题的异步解决方案)