发送手机验证码,要求具有如下功能需求、业务逻辑:
(1)、用户输入手机号,当输入的手机号码为空时,提示,并且要求用户输入手机号;
(2)、发送手机号码后,button按钮,自动变为不可点击,然后60秒倒计时;
(3)、后台成功发送验证码给手机;
(4)、用户输入验证码,后台判断验证码是否正确。
现在逐一实现:
(1)、用户输入手机号,当输入的手机号码为空时,提示,并且要求用户输入手机号;
<td width="60%">
<input id="user_sn" class="registerInput" name="user_sn" type="text" maxlength="50" value="" οnkeyup="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" οnclick="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秒倒计时;
<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" οnclick="getCode(this);" value="免费获取验证码"/>
<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" οnclick="getCode(this);" value="免费获取验证码"/>
<%-- 获取验证码--%>
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('信息未发送成功,请确认手机号码或邮箱是否正确!!!', '提示');
}
}
});