企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 46℃ 0评论

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

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);  
    } 

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

转载请注明:码云笔记 » javascript实现手机端获取验证码邀请领取红包实例

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址