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

表单中含有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 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,256评论 0 7
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,807评论 2 17
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,738评论 18 399
  • 假设想在一个字符串'hello,how are you'中匹配一个单词'are',用直接量写的正则表达式是 但是如...
    靳刘杰阅读 519评论 1 1
  • 课程进行了三分之一,每天都被小伙伴们的奇思妙想所感动所震撼。 一、58号学员老李的《简约而不简单》作业: 很有视觉...
    lilycat阅读 146评论 0 0