怎么样才能先通过文字验证码，然后才进行手机号码验证？

Question

我想实现必须先进行文字验证码验证，然后进行手机号码验证，就像下面这样的，应该怎么做？

代码：

<div class="form-group">
    <div class="col-md-12">
     <div class="input-group">
      <span class="input-group-addon" id="basic-addon2">验证码</span>
       <input name="verify" class="form-control" placeholder="请输入右边的验证码" type="text">
        <span class="input-group-btn">
        <img id='tpvercod' height="30" alt="验证码" src="{:U('Index/User/verifyImg',array())}" title="点击刷新">
        </span>                            
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">手机号</span>
                            <input type="tel" name="user_mobi" id="user_mobi" value="" class="form-control" placeholder="请输入手机号" aria-describedby="basic-addon1" required="" autofocus="" />
                            <span class="input-group-btn">
                                <input id="btnGetVerCod" type="button" class="form-control btn btn-info pull-right" value="获取验证码">
                            </span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-12">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon2">请输入</span>
                            <input type="text" name="vercod" id="vercod" value="" class="form-control" placeholder="请输入手机收到的验证码" />
                        </div>
                    </div>
                </div>

用了keyup后，每个字符都触发了ajax提交，应该怎么破~~~

$("#txtverify").keyup(function() {
                    var v_txt_ver_cod = $("#txtverify").val();
                    $.ajax({
                        url: "{:U('User/rcvTxtVerCod')}",
                        data: {
                            txt_ver_cod: v_txt_ver_cod,
                        },
                        type: "POST",
                        dataType: "json",
                        success: function(JSON) {
                            console.log(JSON);
                            if (JSON.result == "N") {
                                alert('N');
                            } else {
                                if (JSON.result == "Y") {
                                    console.log(JSON);
                                }
                            }
                        },
                        error: function(xhr, status, errorThrown) {
                            console.log("keyup err");
                            console.log(status);
                        }
                    }); //ajax end here
                });

Answer 1

非常感谢您邀请我回答，不过5楼的回答比较符合你的需求了，js代码怎么写就要看你选择jQuery还是angularjs了。

<input type="text" name="vercod" id="vercod" value="" class="form-control" placeholder="请输入手机收到的验证码" disabled />


$("#txtverify").keyup(function () {
    var vcodeStr = $(this).val();
    $.post("/login/CheckVcode", { vcode: vcodeStr }, function (data) {
        if (data == "0") {//这里data==什么随你定
            $('#vercod').attr("disabled", false);
        }
        else {
             $('#vercod').attr("disabled", true);
        }
    });
});

Answer 2

手机号获取验证码的那个先disable。给验证码的的那个input.text添加一个 onChange或者onKeyUp（看你想要的效果自行选择，个人觉得的keyUp比较好，但是js写的比较复杂）事件，在这个事件里把用户输入的验证码发送Ajax到后台验证，验证成功再enable获取手机验证码的按键。

至于防止脚本在通过图形验证码之后才能获取手机验证码那就是后台的逻辑的问题了。

Answer 3

把每一步验证都写成一个函数，第一个函数验证成功则继续往下执行下一个验证，一直到最后一个则说明验证成功

Answer 4

点获取验证码的时候, 向服务器发送请求, 服务器开始验证'验证码'和'手机号码', 如果'验证码'通过, 再验证'手机号码', 发送手机短信
如果'验证码'不通过, 直接返回错误信息

Answer 5

做一个判断吧，如果文字验证码验证成功，点击手机获取验证码才会发出请求，不然就错误提示，请填写上面的验证码，并把焦点放在上面

Answer 6

可以先把获取手机验证码按钮设置成不可点击，等文字验证码通过了才可以点击手机验证码