javascript实现手机端获取验证码邀请领取红包实例
这是我之前做的一个公司的移动端项目,很简单的一个表单验证,要求就是老用户通过一个邀请链接方式发送到未注册的用户,用户通过输入手机号码获取到验证码,达到领取红包的一个操作,具体方法分享给大家,不喜勿喷,只是希望有和我一样需求的读者们能够有所帮助,废话不多说,接下来往下看效果图:
因为这个是要嵌入到微信公众号的,所以实现方式是通过 HTML5 来完成的。
HTML 代码:
<section> <div id="regPicture"> <div class="photo"> <img id='pic' src="../redpacket/images/default.png" /> </div> <p class=" invite ">接受"<span class="userName" id="userName">XX</span>"邀请,体验 XX</p> <p class="getCoupon">即可获得<span class="redNum">100</span>元红包</p> </div> </section> <section class="forminter"> <form id="registerForm" action="" method="post" name="form1"> <input type="text" placeholder="输入手机号接受邀请" id="mobile" /><br /> <input type="text" placeholder="输入验证码" id="enterCode" /> <input type="button" id="btnSendCode" class='btnSendCode' value="获取验证码" /><br /> <input type="button" value="领取红包" id="receiveCoupon" /> </form> <div id="bg"></div> <div id='alert' class="alert"> <p id='msg' class="msg"></p> <button id='alertBtn' class="alertBtn"></button> </div> </section> <footer id="footer"> <div id="logo"><img src="../redpacket/images/icon@3x.png"></div> <div id="download"> <a href="#">下载客户端</a> </div> </footer>
这里给大家补充一下 HTML5 的新的表单特性
新的 form 属性:
Autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
autocomplete 适用于<form>标签,以及以下类型的<input>标签:text,search,url,telephone,email,password,datepickers,range 以及 color。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form>
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的<input>标签:text,search,url,telephone,email 以及 password。
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
<input type="text" placeholder="输入手机号接受邀请" id="mobile" />
接下来就是 JavaScript 代码部分,这里我们需要掌握的是正则表达式判断手机号码以及验证码的方法,还有就是 setTimeout()方法的使用。
JavaScript 代码:
var InterValObj; //timer 变量,控制时间 var count = 60; //间隔函数,1 秒执行 var curCount; //当前剩余秒数 var option = {}; //定义一个检测手机号码的函数,通过正则表达式判断用户输入的手机号码是否正确 function validatemobile(mobile) { var reg = /^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/; if(!reg.test(mobile)) { return false; } return true; } //通正则检测验证码输入的正确与否 function validateCode(code) { if(code == null || code.length != 6) { return false; } return true; } //这里是弹框的实现,这个我想大家都会,没的说 function showAlert(msg, btnMsg, callback) { $('#msg').html(msg); $('#alertBtn').html(btnMsg); if(!$.isFunction(callback)) callback = function(){}; document.getElementById("bg").style.display = "block"; document.getElementById("alert").style.display = "block"; $('#alertBtn').off('click'); $('#alertBtn').on('click',function(){ document.getElementById("bg").style.display = "none"; document.getElementById("alert").style.display = "none"; callback(); }); } //这个函数方法是用来判断链接在什么设备上打开从而下载/打开 App function downloadApp(){ if (ua.windowsPhone) return; //windowsphone 不支持 if (ua.weChat && ua.iOS) { //iOS 上的微信 webview return ; } else if (ua.weChat && ua.android) { //安卓上的微信 webview return ; } else if (ua.windowsPhone) {//winphone 不支持 return ; } else { //非微信方式打开 if ((ua.UC && ua.android && !ua.u3 && !ua.chrome)) { //浏览器不支持 return ; } else { timeoutRedirect(); } } } //因为我们是通过用户来邀请用户点击参与活动的,当然少不了获取邀请人的信息。 function getRecommendinfo() { $.post('http://192.168.2.66:8066/index.php?r=expert/login/recommendinfo', option, function(result) { if(!result || !result.data) return; //服务器返回数据为空时的提示 mark var image = result.data.image || null; var name = result.data.name || null; var nameControl = $('#userName'); var imageControl = $('#pic'); if(nameControl && name) nameControl.html(name); if(imageControl && image) imageControl.attr('src', image); }); } 这个函数方法是用来获取验证码的,通过调用上边我们写的 validatemobile()方法来判断用户输入的手机号码判断正确性。 function sendMessage() { option.mobile = document.getElementById("mobile").value; if(!validatemobile(option.mobile)){//调用上边的方法验证手机号码的正确性 $("#mobile").attr('class','bgColor'); showAlert('请输入正确的手机号!','重新输入', function(){ $('#mobile').val(''); $('#mobile').attr('class',''); }); return; } //向后台发送处理数据 $.ajax({ url: 'http://192.168.2.66:8066/index.php?r=expert/common/pushmsg', data: option, type: "POST", dataType: "json", success: function(result) { if(!result || result.errorCode != 0){ showAlert('获取失败!','稍后重试'); } curCount = count; $("#btnSendCode").attr('class','btnDisabledSendCode'); $("#btnSendCode").attr("disabled","true"); //禁用按钮 $("#btnSendCode").val("(" + curCount + "s)后重新发送"); InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1 秒执行一次 }, error:function(result){ showAlert('获取失败!','稍后重试'); } }); } //领取红包这一块我们需要先获取到手机号码 mobile 与 enterCodede 的 value 值,通过之前写的 validatemobile()和 validateCode()方法来判断手机号与验证码输入的正确性 function receiveCoupon() { option.mobile = document.getElementById("mobile").value; option.authcode = document.getElementById("enterCode").value; if(!validatemobile(option.mobile)){//调用上边的方法验证手机号码的正确性 $("#mobile").attr('class','bgColor'); showAlert('请输入正确的手机号!','重新输入', function(){ $('#mobile').val(''); $('#mobile').attr('class',''); $('#enterCode').attr('class',''); $('#enterCode').val(''); }); return; } if(!validateCode(option.authcode)){ $("#enterCode").attr('class','bgColor'); showAlert('请输入正确的验证码!','重新输入',function(){ $('#enterCode').attr('class',''); $('#enterCode').val(''); }); return; } //向后台发送处理数据 $.ajax({ url: 'http://192.168.2.66:8066/index.php?r=expert/login/recommendregister', data: option, type: "POST", dataType: "json", success: function(result) { var msg = "红包已经放入您的 XX 账户中"; var btnMsg = "立即体验"; // if(!result || result.errorCode != 0){ // msg = "领取失败!"; // btnMsg = "稍后重试"; // if(result.errorCode == 3){ // msg = "验证码错误!"; // btnMsg = "重新输入"; // $('#enterCode').attr('class','bgColor'); // showAlert(msg, btnMsg, function(){ // $('#enterCode').val(''); // $('#enterCode').attr('class',''); // }); // } // showAlert(msg, btnMsg); // }else{ showAlert(msg, btnMsg, downloadApp); // } }, error:function(){ showAlert('领取失败!','稍后重试'); } }); } //timer 处理函数 function SetRemainTime() { curCount--; if(curCount <= 0) { window.clearInterval(InterValObj); //停止计时器 $('#btnSendCode').attr('class','btnSendCode'); $("#btnSendCode").removeAttr("disabled"); //启用按钮 $("#btnSendCode").val("重新获取"); } else { //样式为灰色的样式 $("#btnSendCode").attr('class','btnDisabledSendCode'); $("#btnSendCode").attr("disabled","true"); //禁用按钮 $("#btnSendCode").val("(" + curCount + "s)后重新发送"); } } /** * 尝试跳转 openAppHref,如果跳转失败,进入 officialHref */ function timeoutRedirect() { var startTime = Date.now(); var timeout = 500; openApp(); var t = setTimeout(function () { var endTime = Date.now(); if (endTime - startTime < timeout + 100) { //若启动应用,则 js 会被中断较长时间,超出此范围 if (ua.ios9) { //ios9 会弹出确认按钮,时间一定会超出 openH5(); //此处请各位自行处理,暂时没有找到好的办法 return; } openH5(); } }, timeout); window.beforeunload = function () { clearTimeout(t); } window.pagehide = function () { clearTimeout(t); } window.onblur = function () { clearTimeout(t); } } function openH5() { window.location.href = officialHref; } function openApp() { if (!openAppHref ) { window.location = officialHref; return ; } if (ua.android || ua.ios9 || ua.chrome18) { window.location = openAppHref; return; } var iframe = document.createElement("iframe"); iframe.style.display = "none"; iframe.style.border = "none"; iframe.style.width = "1px"; iframe.style.height = "1px"; iframe.src = openAppHref; document.body.appendChild(iframe); }
以上就是我在实际项目中用到的方法,希望对读者有所帮助,如果有表达比清楚的地方,请多多包涵。也欢迎大家前来指正。
码云笔记 » javascript实现手机端获取验证码邀请领取红包实例