手机验证

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>

 js

$(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 + "秒内输入验证码");  
	    }  
	}
});

 

你可能感兴趣的:(验证)