用户登录，实现发送手机验证码

用户登录，实现发送手机验证码。

发送手机验证码，要求具有如下功能需求、业务逻辑：

（1）、用户输入手机号，当输入的手机号码为空时，提示，并且要求用户输入手机号；

（2）、发送手机号码后，button按钮，自动变为不可点击，然后60秒倒计时；

（3）、后台成功发送验证码给手机;

(4)、用户输入验证码，后台判断验证码是否正确。

现在逐一实现：

（1）、用户输入手机号，当输入的手机号码为空时，提示，并且要求用户输入手机号；

<td width="60%">
<input id="user_sn" class="registerInput" name="user_sn" type="text" maxlength="50" value="" onkeyup="showContent(this,event,'zTree','dictSn',true,true);" autocomplete="off" />
<br/><span class="grey2">用户名可为手机号</span></td>

<td align="right">验证码<br /> <span class="grey2">( captcha )</span><br /></td>
                              <td>
                                 <input type="text" class="left" style="width:80px;height:30px;border-right:none;" name="code" id="code"/><input name="input3" id="code_button" class="font14 left" style="background:#f2f2f2;width:120px;height;30px;line-height:30px;" type="button" onclick="getCode(this);" value="免费获取验证码"/>
                                <input type="hidden" class="registerInput" name="code_value" id="code_value"/>
                              <br/>
                              <span class="grey2">直接发到手机或者是邮箱</span></td>

判断手机号码是否为空：function getCode(obj){-
       var user_sn=document.getElementById('user_sn').value;
       if('' == user_sn){
           $.jBox.info('请输入用户名！', '提示');
           document.getElementById('user_sn').focus();
       }}

（2）、发送手机号码后，button按钮，自动变为不可点击，然后60秒倒计时；

<%-- 获取验证码--%>
   var wait=60;
   var interValObj;
   document.getElementById("code_button").disabled = false;

   function getCode(obj){-
       var user_sn=document.getElementById('user_sn').value;
       if('' == user_sn){
           $.jBox.info('请输入用户名！', '提示');
           document.getElementById('user_sn').focus();
       }else{
           <%--设置button效果，开始计时 --%>
            $("#code_button").attr("disabled", "true");
            $("#code_button").val("倒计时 " + wait + " 秒");
            interValObj = window.setInterval(setRemainTime, 1000); <%--启动计时器，1秒执行一次 --%>
            $.ajax({
                type: "post",
                dataType: "text",
                url: '${webAppUrl}/cust/code.html?user_sn='+user_sn,
                async:false,
                success: function (msg){
                   if(!isNaN(msg)){
                       document.getElementById('code_value').value = msg;
                    }else{
                       $.jBox.info('信息未发送成功，请确认手机号码或邮箱是否正确！！！', '提示');
                    }
                }
            });
        }
   }

<%--timer处理函数 --%>
   function setRemainTime() {
        if (wait == 0) {
            window.clearInterval(interValObj);<%--//停止计时器 --%>
            $("#code_button").removeAttr("disabled");<%--//启用按钮 --%>
            $("#code_button").val("重新发送验证码");
            document.getElementById('code_value').value = ''; <%--//清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      --%>
            wait = 60;
        }
        else {
           wait--;
            $("#ait + " 秒");
        }
   }

（3）、后台成功发送验证码给手机;

3.1生成验证码：String code = " ";

Random random = new Random();

for(int i=0; i<6; i++){ //表示生成六位验证码

code += String.valueOf(random.nextInt(10)); // 采用随机码生成0-10（包括0，不包括10）的验证码，生成六次，构成六位数验证码；

}

3.2 生成验证码短信：

String result = SmsSendUtil.sendSms(user_name, "您好！请您将验证码：\""+code+"\"输入在页面上的\"验证码文本对话框\"进行验证。谢谢！！！【中国成本管控网】");

//SmsSendUtil是一个包，里面的方法sendSms，这个包我等会上传到csdn资源里面，就可以了。

3.3 返回code给jsp页面:response.getWriter().print(code);

(4)、用户输入验证码，后台判断验证码是否正确。

             $.ajax({
                type: "post",
                dataType: "text",
                url: '${webAppUrl}/cust/code.html?user_sn='+user_sn,
                async:false,
                success: function (msg){                          //返回msg也就是code（后台发送的验证码）；
                   if(!isNaN(msg)){
                       document.getElementById('code_value').value = msg;   //如果前台输入的code值，和后台生成的code值相同，那么验证码输入成功。
                    }else{
                       $.jBox.info('信息未发送成功，请确认手机号码或邮箱是否正确！！！', '提示');
                    }
                }
            });

用户登录，实现发送手机验证码

相关推荐