码云前端 2018-09-03

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

AI 概述

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

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

因为这个是要嵌入到微信公众号的，所以实现方式是通过 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实现手机端获取验证码邀请领取红包实例的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 3 赏

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

微信

支付宝

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

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » javascript实现手机端获取验证码邀请领取红包实例

码云 SVIP

分享到：

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复