手机验证

最新推荐文章于 2021-04-11 21:48:43 发布

iteye_8567

最新推荐文章于 2021-04-11 21:48:43 发布

阅读量193

点赞数

分类专栏： Js基础文章标签： json java

本文链接：https://blog.csdn.net/iteye_8567/article/details/82603717

版权

Js基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文详细介绍了手机验证注册页面的构建过程及短信验证码功能的实现，包括页面布局、表单验证、时间倒计时逻辑以及与后端交互的AJAX请求。文章深入探讨了如何通过JavaScript定时器实现短信验证码的发送与验证过程，确保用户在操作过程中能够获得及时且准确的反馈。

摘要由CSDN通过智能技术生成

html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="account/layout">
<head>
<title>用户注册-手机验证</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link type="text/css" rel="stylesheet" th:remove="all" href="../../static/web/css/style.css" />
<link type="text/css" rel="stylesheet" th:href="@{/app/web/css/account/style_login.css}" href="../../static/web/css/account/style_login.css" />
<link type="text/css" rel="stylesheet" th:remove="all" href="../../static/web/bootstrap/css/bootstrap.css" />
<script th:src="@{/app/web/js/account/account.register_validata.js}"></script>

<style type="text/css">
.step1 {
	background: url(/obiz/app/web/images/1-off.png) no-repeat left 23px;
}

.step2 {
	background: url(/obiz/app/web/images/2-on.png) no-repeat left 23px;
}

.step3 {
	background: url(/obiz/app/web/images/3-off.png) no-repeat left 23px;
}
</style>
</head>
<body>
	<div class="wrapper">
		<div id="content" layout:fragment="content">
			<div class="container" style="width: 100%;">

				<h1>
					免费注册
					<span>
						已经有账号？
						<a href="#" th:href="@{/app/account/login.html}">立即登录</a>
					</span>
				</h1>
				<ul class="user_step1">
					<li class="step1">填写账户信息</li>
					<li class="on_cu step2">验证账户信息</li>
					<li class="step3">注册成功</li>
				</ul>
				<p class="p_title">请选择以下任意一种验证方式：</p>
				<div class="phone80">
					<a>
						<img th:src="@{/app/web/images/phone80-on.png}" src="../../static/web/images/phone80-on.png" />
					</a>
					<a href="register_validation_email.html" th:href="@{/app/account/mailvalidation.html}">
						<img th:src="@{/app/web/images/letter80-off.png}" src="../../static/web/images/letter80-off.png" style="margin-left: 40px;" />
					</a>
				</div>
				<form method="POST" th:action="@{/app/account/mailvalidation}" data-parsley-validate="true" class="form-horizontal"
					style="width: 60%; margin-top: 40px; margin-left: 250px;">
					<div class="control-group">
						<label class="control-label" for="inputEmail">手机号码：</label>
						<div class="controls">
							<input name="mobile" type="text"></input>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<input type="button" data-toggle="modal" data-target="#example" class="btn" style="width: 220px; margin-top: 10px;" value="下一步" />
						</div>
					</div>
				</form>
				<div id="example" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<a class="close" data-dismiss="modal">×</a>
								<h3>短信获取验证码</h3>
							</div>
							<div class="modal-body">
							 <p class="p_title" style="width:80%; margin: 0 auto; margin-top:30px; color:#999;">短信已发送到您的手机，请填写短信中的验证码（此项服务免费）</p>
                             <p class="p_title" style="width:80%; margin: 0 auto; margin-top:30px;color:#333; ">您的手机号码：<span style="color:#999;" id="mobile">12345678901 </span><a class="a_tel">更换手机号码</a></p>
                            <input name="mobilecode" id="mobilecode" type="text" />
                            <input type="button" id="btnSendCode" name="btnSendCode" value="免费获取验证码"/>
							</div>
							<div class="modal-footer">
								<input id="mobilevabtn" type="button" class="btn" style="width:140px; margin:20px 0 0 160px;" value="验证"/>
								<a href="#" class="btn" data-dismiss="modal">关闭</a>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
	</div>
</body>
</html>

$(document).ready(function(){
	var InterValObj; //timer变量，控制时间  
	var count = 60; //间隔函数，1秒执行  
	var curCount;//当前剩余秒数  

	$("#btnSendCode").click(function(){
		curCount = count;
		var mobileval = $("#mobile").text();
		if(mobileval != ""){
			$("#btnSendCode").attr("disabled", "true");
			$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
			InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器，1秒执行一次 
		       // 向后台发送处理数据  
	        $.ajax({  
	            type: "POST", // 用POST方式传输  
	            dataType: "json", // 数据格式:JSON  
	            url: "/obiz/app/account/registermobiledendcode", // 目标地址  
	            data: {mobile:mobileval},  
	            complete : function(data){
	            	if(data.status===200){
	            		//window.location.href = "/obiz/app/account/testhome.html";
	            	}else{
	            		alert(data.responseJSON.message);
	            		//var text  = JSON.parse(data.responseText);
	            		//alert(text["message"]);
	            	}
	            }  
	        }); 
		}else{
			alert("手机号不能为空！");
			return false;
		}
	});
	
	//var codetext = $("#mobilecode");
	$("#mobilevabtn").click(function(){
		//alert(codetext);
		var code = $("#mobilecode").val();
		var mobileval = $("#mobile").text();
		if(code != ""){
	        $.ajax({  
	            type: "POST", // 用POST方式传输  
	            dataType: "json", // 数据格式:JSON  
	            url: "/obiz/app/account/registermobilevalidation", // 目标地址  
	            data: {mobilecode:code,mobile:mobileval},  
	            complete : function(data){
	            	if(data.status===200){
	            		window.location.href = "/obiz/app/account/registerfinish.html";
	            	}else{
	            		alert(data.responseJSON.message);
//	            		var text  = JSON.parse(data.responseText);
//	            		alert(text["message"]);
	            	}
	            }  
	        }); 
		}else{
			alert("请输入验证码！");
			return false;
		}
	});
	
	//timer处理函数  
	function SetRemainTime() {  
	    if (curCount == 0) {                  
	        window.clearInterval(InterValObj);// 停止计时器  
	        $("#btnSendCode").removeAttr("disabled");// 启用按钮  
	        $("#btnSendCode").val("重新发送验证码");  
	        //code = ""; // 清除验证码。如果不清除，过时间后，输入收到的验证码依然有效  
	    }else {  
	        curCount--;  
	        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
	    }  
	}
});