使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > javascript实现手机端获取验证码邀请领取红包实例
码云码云 前端开发

javascript实现手机端获取验证码邀请领取红包实例

这是我之前做的一个公司的移动端项目，很简单的一个表单验证，要求就是老用户通过一个邀请链接方式发送到未注册的用户，用户通过输入手机号码获取到验证码，达到领取红包的一个操作，具体方法分享给大家，不喜勿喷，只是希望有和我一样需求的读者们能够有所帮助，废话不多说，接下来往下看效果图：

Js 实现手机端获取验证码邀请领取红包实例

因为这个是要嵌入到微信公众号的，所以实现方式是通过 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);  
    }

以上就是我在实际项目中用到的方法，希望对读者有所帮助，如果有表达比清楚的地方，请多多包涵。也欢迎大家前来指正。

「点点赞赏，手留余香」

赞 3 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » javascript实现手机端获取验证码邀请领取红包实例

码云 会员

分享到：

相关推荐

发表回复