关于手机验证码前端内容的一些随笔

最近公司为了业绩投放了大批落地页广告，又用到了短信验证码验证，现将源码与大家分享，很详细很格式化，可交流，轻喷。

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('* 短信验证码错误，请核对后重新输入');
       }
   })

})

关于手机验证码前端内容的一些随笔

猜你喜欢