注册短信验证

最新推荐文章于 2023-09-13 19:56:25 发布
原创最新推荐文章于 2023-09-13 19:56:25 发布 · 792 阅读
1 ·
CC 4.0 BY-SA版权
本文介绍了一个包含倒计时功能的会员注册页面实现细节。页面使用HTML、CSS和JavaScript构建，支持用户输入手机号码、获取及验证短信验证码等功能，并集成了倒计时功能以限制验证码的重新请求。
一、html首页带上倒数计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>会员注册</title>
<link rel="stylesheet" href="${cxt!}/static/wxweb/css/mui.min.css" />
<link rel="stylesheet" href="${cxt!}/static/wxweb/oil/reg/css/register.css" />
<script type="text/javascript" src="${cxt!}/static/wxweb/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${cxt!}/static/wxweb/js/mui.min.js"></script>
<script type="text/javascript">
	mui.init();
</script>
</head>
<body>
	<div class="mui-clearfix"></div>
	<div id="mainPage">
		<div class="mui-input-row" align="center">
			<h4>
				<b>欢迎使用报业加油平台</b>
			</h4>
		</div>
		<br />
	    <div class="mui-input-row">
			<input type="tel" maxlength="11" value="" class="mui-input-clear" placeholder="手机号码(必填)" id="phone"
				name="phone"/>
		</div>
		<div class="mui-input-row">
			<input type="text" maxlength="6" value="" class="mui-input-clear" placeholder="短信验证码" id="code" />
			<button type="button" class="ui-btn-block my-btn-normal" id="getCode">获取验证码</button>
		</div>	
		
		<div class="mui-input-row">
			<input type="text" maxlength="30" value="" class="mui-input-clear" style="width:100%;margin-bottom: 10px;"
			placeholder="姓名(选填)" id="name" name="name">
		</div>	
			<div class="mui-input-row">
			<input type="text" maxlength="11" value="" class="mui-input-clear" placeholder="车牌号码(选填)" id="carNo" name="carNo"  style="width:100%;margin-bottom: 10px;"/>
		</div>
		<div class="mui-input-row">
			<div class="agreement" style="font-size: 14px;text-align:center;">
				<span id="cur" class="btn cur"></span>我已阅读并同意
				<a href="javascript:;" onclick="toggleDialog(true)" style="color:#e66b1a;">《用户协议》</a>
			</div>
		</div>
		<button type="button" class="mui-btn mui-btn-block my-btn-block" id="submitCode">注册</button>
	</div>

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<input name="type" type="hidden" id="type" value="${pd.type!}" />
	<input name="newcode" type="hidden" id="newcode" value="" />
<script type="text/javascript">
	document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
		// 通过下面这个API隐藏右上角按钮
		WeixinJSBridge.call('hideOptionMenu');
	});
	var cxt = "${cxt!}";
	var openid = "${pd.openId!}";

	wx.config({
	});
	//绑定操作
	document
			.getElementById("submitCode")
			.addEventListener(
					"click",
					function() {
						if (!$("#cur").hasClass("cur")) {
							mui.alert("请先阅读并同意《个人信息和短信接收协议》");
							return false;
						} else {
							var name = $("#name").val();
							var phone = $("#phone").val();
							var code = $("#code").val();
							var newcode = $("#newcode").val();
							var carno = $("#carNo").val();	
							/* if (name == "") {
								mui.alert("请输入姓名");
								return false;
							} */
						
							if (!/^1[3-9]+[\d]{9}$/.test(phone)) {
								mui.alert("请输入有效的手机号");
								return false;
							}

							var carno1 = carno.toUpperCase();	
							var reg=/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
	                        var flag=reg.test(carno);
	                        if(!flag && carno != ""){
						    mui.alert("车牌异常，请检查!");
							return false;
							}
							
							if (newcode == "") {
								mui.alert("请发送短信验证码");
								return false;
							}
							if (code != newcode) {
								mui.alert("短信验证码不正确,请重新输入");
								return false;
							}
							var type = $("#type").val();
							var data = {
								openid : openid,
								name : name,
								phone : phone,
								carno : carno
							};
							$.ajax({
										type : "POST",//提交表单的方式
										url : encodeURI(encodeURI(cxt
												+ "//wechat/web/bind")),
										data : data,
										dataType : "json",//返回的值的类型
										contentType : "application/x-www-form-urlencoded; charset=UTF-8",
										error : function(XMLHttpRequest,
												textStatus, errorThrown) {
											mui.alert(textStatus);
										},
										success : function(data) {
											if (data.result == "3") {
												mui.alert("请联系管理员完善信息!");
											} else {
												mui.alert('欢迎,注册成功!', '<img src="${cxt!}/static/wxweb/images/welcome.gif" width="100%">', function() {
											  /*   if (type == "32") {
													 setTimeout(function() {
														wx.closeWindow();
													}, 900);
												} else { */
													//跳转页面
													if(type==11){
														window.location.href = cxt+'/wechat/oil/oilDetails?openId='+openid+'&userType=2&type=11';
													}else if(type==31){
														window.location.href = cxt+'/wechat/web/trans/'+openid+'?userType=2&type=31';
													}else{
													    window.location.href = cxt+'/wechat/web/trans/'+openid+'?userType=2&type='+type;
													}
													
												/* } */
											    });        
												
												
											}
										}
									});
						}

					});
	var second = 120;
	//动态 获取验证码 按钮
	function setGetCodeText() {
		var getCode = document.getElementById("getCode");
		getCode.innerHTML = "获取验证码(" + second + ")";
		second--;
		if (second > 0) {
			setTimeout(setGetCodeText, 1000);
		} else {
			getCode.innerHTML = "获取验证码";
			getCode.removeAttribute("disabled");
			//修改回原时长
			second = 120;
		}
	}
	///////////////////////////////////////////////////////////////////////////////
	document.getElementById("getCode").addEventListener(
			"click",
			function() {
				/* var name = $("#name").val();
			    if (name == "") {
					mui.alert("请输入姓名");
					return false;
				} */
				//执行获取验证码操作
				var phone = $("#phone").val();//手机号
				if (!/^1[3-9]+[\d]{9}$/.test(phone)) {
					mui.alert("请输入有效的手机号");
					return false;
				}
				var type = $("#type").val();
				//var acId = $('#accId').val();
				//启动
				setGetCodeText();
				this.setAttribute("disabled", "disabled");
				var murl = cxt + '/wechat/web/send?M=' + Math.random();
				$.ajax({
					type : "post",
					contentType : "application/x-www-form-urlencoded",
					url : murl,
					data : {
						openid : openid,
						phone : phone
					//accId:acId
					},
					dataType : "json",
					success : function(data) {
						if (data.result != "0") {
							second = 0;
							mui.alert(data.msg);
							//$("#phone").val("");
							document.getElementById("getCode")
									.removeAttribute("disabled");
						} else {
							$("#newcode").val(data.code);
							$("#phone").attr("readOnly", "true");
							mui.toast(data.msg);
						}
					},
					error : function(msg) {
						second = 0;
						mui.alert("发送短信失败");
					}
				});
			});
</script>
<script type="text/javascript">		
	//////////////////////////////////////////////////////////////////////////
	$('.agreement .btn').click(function() {
		if ($(this).hasClass('cur')) {
			$(this).removeClass('cur');
		} else {
			$(this).addClass('cur');
		}
	});
	/////////////////////////////////////////////////////////////////////////
	function toggleDialog(show) {
		var animationClass = show ? "slipUp" : "slipBottom";
		var animation = function() {
			var ele = document.getElementById("dialog-face");
			ele.className = "dialog-face " + animationClass;
			ele = document.getElementById("dialog");
			ele.className = "dialog-root " + animationClass;
			ele = document.getElementById("dialog-wrapper");
			ele.className = "dialog-wrapper " + animationClass;
		};
	
		setTimeout(animation, 100);
	}
</script>
</body>
</html>
二、后台
http://61.143.63.169:8080/