美文网首页
表单中含有AJAX验证问题的异步解决方案

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

作者: Yance | 来源:发表于2017-07-24 17:14 被阅读0次

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

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

    HTML代码

    <form onSubmit="return myCheck()" ...>
    

    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验证问题的异步解决方案

          本文链接:https://www.haomeiwen.com/subject/upwbkxtx.html