最近公司为了业绩投放了大批落地页广告,又用到了短信验证码验证,现将源码与大家分享,很详细很格式化,可交流,轻喷。
1.HTML大家都会,直接上代码,css就不粘贴出来了。
<section class="form_apply">
<div class="phone_number">
<img src="img/mobile.png" alt="">
<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11">
</div>
<div class="code_number">
<img src="img/info.png" alt="">
<input type="number" id="code" placeholder="短信验证码" maxlength="6"/>
<input type="button" id="get_code" value="获取验证码" />
</div>
<div class="form_tip"></div>
<div class="apply_btn">免费申请</div>
<div class="more_herf"><a href="http://www.xxxx.com/" style="color: #00A0E9;">更多产品请点击></a></div>
</section>
2.js详细内容,让你复制可用。token是后台给出的,这里为演示用固定的值,有疑问请回复我。
$(function () {
//先声明验证码返回数据
var Rcode = "";
var Tcken = "";
var UserCode = "";
var MbStr = "";
//先给输入框聚焦引起用户重视
$("#phone").focus();
//客户重新输入时不提示错误信息
$("input").focus(function () {
$(".form_tip").html("");
})
//短信发送按钮倒计时
$("#get_code").click(function () {
var that = this;
that.disabled = true;
var count = 60;
var token = "BE315Dxx-CFxx6-4xxx-ACAC-70D90BEAxxx";
var regPhone = /^1[34578]\d{9}$/;
var tel = $("#phone").val();
if (regPhone.test(tel) == false) {
$(".form_tip").html('* 手机号码错误,请核对后重新输入');
that.disabled = false;
return false;
} else {
var timer = setInterval(function () {
if (count > 1) {
count--;
that.value = count + "s后重发";
} else {
that.value = "获取验证码";
that.disabled = false;
clearInterval(timer); //清除计时器
}
}, 1000);
$.ajax({
type: "post",
url: "../SendxxxxvPhone",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "PhoneNumber": tel }),
beforeSend: function (request) {
request.setRequestHeader("x-ol-authtoken-ssl-xxxx", token);
},
dataType: 'JSON',
cache: false,
success: function (data) {
var jsd = eval(data);
Rcode = jsd.ReturnResult;
Tcken = jsd.Ton;
UserCode = jsd.Code;
MbStr = jsd.Mb;
}
})
}
})
//点击提交数据
$(".apply_btn").click(function () {
var cd = $("#code").val();
console.log(cd)
console.log(Rcode)
//此判断必须,如果两个都为空也符合下一步判断条件的相等,也就是说客户什么都不填也能跳转到下一步页面
if(cd==""){
$(".form_tip").html('* 请输入短信验证码');
return false;
}
if (Rcode == cd) {
var tel = $("#phone").val();
//将得到的信息发送到跳转的页面进行下一步使用
// 由于存在安全性风险,只建议在移动端使用此方式
window.location.href = "./apply.html?l=" + tel + "&t=" + Tcken + "&c=" + UserCode + "&m=" + MbStr;
}else{
$(".form_tip").html('* 短信验证码错误,请核对后重新输入');
}
})
})