在注册用户的时候,我们可能根据需求会需要进行手机短信的验证,本篇博客便是介绍如何实现该功能。(代码后端是基于java,框架用的是SSH)
要发向手机发短信当然就要用到第三方接口,我用的融合通信的接口。(到网站去注册后,会有客服联系你,给你相关语言的发开包,一开始会送你20条免费测试短信。客服挺好的不够用你可以再向她申请点。)
1.首先显示JSP界面代码(核心代码我已经标注蓝色):
<p class="advertisement">短信验证测试2.0</p>
<div id="panelname" style="margin-left: 500px;width: 800px;">
<div id="registername"><p class="userregister">用户注册</p></div>
<form action="register_add.action" οnsubmit="return clickregister()">
<div style="margin-bottom:20px">
<div>手机号码:</div>
<input class="easyui-textbox" id="telephonename" name="loginName" data-options="prompt:'请输入手机号',validType:'mobile'" style="width: 300px; height: 30px;">
<input class="code" type="button" id="btnSendCode" οnclick="sendMessage()" value="点击获取手机验证码" />
<span id="telephonenameTip"></span>
</div>
2.用javaScript来控制界面数据的获取和传送,以及用JQuery来实现数据的会显。
//短信验证码
var InterValObj; //timer变量,控制时间
var count = 60; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
function sendMessage(){
curCount = count;
var jbPhone = $("#telephonename").val();
alert(111);
alert(jbPhone);
var jbPhoneTip = $("#telephonenameTip").text();
if (jbPhone != "") {
/* if(jbPhoneTip == "√" || jbPhoneTip == "√ 短信验证码已发到您的手机,请查收"){ */
// 产生验证码
for ( var i = 0; i < codeLength; i++) {
code += parseInt(Math.random() * 9).toString();
}
// 设置button效果,开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器,1秒执行一次