首页 > 代码库 > 简单带验证的注册页面
简单带验证的注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
<title>聪付注册页面</title>
<style>
@charset "utf-8";
* {
word-wrap: break-word;
}
html {
-webkit-text-size-adjust: none;
}
body {
font: normal 14px/24px "微软雅黑";
}
/*登录注册的头部*/
#header {
height: 111px;
}
.header_inner{width: 1181px; margin: auto;}
.header_left {
/*width: 525px;*/
float: left;
}
.header_left img {
float: right;
margin-top: 21px;
}
.header_center {
color: #525898;
font-size: 24px;
border-bottom: 1px solid #CCCCCC;
float: left;
margin-left: 59px;
margin-top: 32px;
}
.header_center h3 {
/*border-bottom: 1px solid #CCCCCC;*/
background: url(img/login-01.png ) no-repeat bottom;
line-height: 38px;
}
.header_right {
/*width: 417px;*/
float: left;
margin-top: 27px;
margin-left: 700px;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 12px/1.5 Tahoma;
}
#background {
height: 692px;
background: url(img/login-background.png) no-repeat;
background-size: cover;
overflow: hidden;
}
#wrap {
width: 600px;
height: 470px;
margin: 150px auto;
}
#tab {
height: 60px;
overflow: hidden;
zoom: 1;
background: #eeeeee;
border: 3px solid #ccc;
}
#tab li {
float: left;
color: #666666;
width: 297px;
height: 60px;
cursor: pointer;
line-height: 54px;
text-align: center;
font-size: 22px;
font-family: "微软雅黑";
}
#tab li a{text-decoration: none; color: #000000;}
/*#tab li.current {
color: #000;
background: #FFFFFF;
}
*/
#content {
border: 3px solid #CCCCCC;
border-top-width: 0;
width: 595px;
height: 415px;
background: #FFFFFF;
position: relative;
}
#content ul {
line-height: 25px;
display: none;
margin: 0 30px;
padding: 10px 0;
}
/*表单的样式==========================================================*/
.form {
width: 344px;
height: 303px;
margin: auto;
}
.form p {
display: block;
float: left;
font-size: 13px;
}
.phone_num {
margin-top: 45px;
}
.phone_num,
.password_1,
.again_p,
.submit_1 {
width: 338px;
height: 45px;
margin-bottom: 8px;
}
.yanzheng {
width: 180px;
height: 45px;
margin-bottom: 8px;
}
/*验证码*/
#btnSendCode{width: 154px; height: 48px;}
#btnSendCodes{width: 154px; height: 48px;}
/*#id{width:150px; height:45px; border: none;}*/
.password_1 {}
.password_2 {}
.OK {
float: left;
margin-left: 85px;
margin-top: 8px;
}
.submit_1 {
background: #FFFFFF;
}
/*底部图标*/
.iconfont {
height: 184px;
overflow: hidden;
}
.iconfont .inner_icon {
width: 1196px;
margin: auto;
}
.iconfont dl {
width: 300px;
float: left;
margin-top: 63px;
margin-left: 73px;
}
.iconfont dl dt {
float: left;
margin-right: 10px;
}
.iconfont dl dd {
float: left;
line-height: 24px;
}
/*footer*/
#footer_wrap{height:119px; background: #dddddd; }
.footer_inner{width: 1106px; margin: auto;}
.left{float: left; /*margin: 25px 10px 0 411px; */ margin-top: 25px; }
.center{ float: left; font-size: 14px; margin-top: 49px; margin-left: 20px; }
.right{ float:left; margin-top: 51px; margin-left: 208px;}
.right a{ color: #000000; text-decoration: none;}
/*弹出*/
.po_phone_num{display: none; color: #EC3E7D; position: absolute; right: -37px; top: 61px;}
.po_password{display: none;color: #EC3E7D;position: absolute; right: -37px; top: 176px;}
.po_again_p{display: none;color: #EC3E7D;position: absolute; right: -37px; top: 235px;}
.form_act{display: none;color: #EC3E7D;}
</style>
</head>
<body>
<div id="header">
<div class="header_inner">
<div class="header_left"><img src="http://www.mamicode.com/img/header.png"></div>
<div class="header_center">
<h3>可视温暖在身边</h3>
</div>
<div class="header_right">
<img src="http://www.mamicode.com/img/header2.png" >
</div>
</div>
</div>
<!-- html代码begin -->
<div id="background">
<div id="wrap">
<ul id="tab">
<li style="color: #000;background: #FFFFFF;"><a href="http://www.mamicode.com/personal-register.html">个人注册</a></li>
<li><a href="http://www.mamicode.com/bussinessregister.html">商家注册</a></li>
</ul>
<div id="content">
<!--个人注册-->
<ul style="display:block;">
<form class="form" action="personal-login.html">
<input type="text" id="phone" name="tel" placeholder="手机号" class="phone_num"/>
<div class="po_phone_num">请输入正确的手机号码</div>
<input type="text" id="checkCode" name="checkcode" size="6" class="yanzheng" placeholder="验证码"/>
<input id="btnSendCode" type="button" value="http://www.mamicode.com/发送验证码" onclick="sendMessage()" />
<div class="form_act">输入正确验证码</div>
<input type="password" placeholder="登录密码" class="password_1" />
<div class="po_password">输入不正确，至少6个字符</div>
<input type="password" placeholder="确认密码" class="again_p" name="password"/>
<div class="po_again_p">密码与确认密码不相符，请重新填写</div>
<input type="checkbox" class="OK" />
<p>同意《聪付服务协议》</p>
<input type="submit" value="http://www.mamicode.com/下一步" class="submit_1"/>
</form>
<!--<div class="po_phone_num">请输入正确的手机号码</div>
<div class="form_act">输入正确验证码</div>
<div class="po_password">输入不正确，至少6个字符</div>
<div class="po_again_p">密码与确认密码不相符，请重新填写</div>-->
</ul>
</div>
</div>
</div>
<!--三个图标的部分哦-->
<!--底部图标-->
<div class="iconfont">
<div class="inner_icon">
<dl>
<dt><img src="http://www.mamicode.com/img/login_icon1.png" ></dt>
<dd style="margin-right: 120px;">可视支付，余额随时看</dd>
<dd>使用更安心</dd>
</dl>
<dl>
<dt><img src="http://www.mamicode.com/img/login_icon2.png" ></dt>
<dd style="margin-right: 120px;">数据分析，家人云查看</dd>
<dd>温暖在身边</dd>
</dl>
<dl>
<dt><img src="http://www.mamicode.com/img/login_icon3.png" ></dt>
<dd style="margin-right: 120px;">商家入驻，审核优把关</dd>
<dd>使用更安全</dd>
</dl>
</div>
</div>
<!--加载尾部的内容-->
<!--<div id="footer01"></div>-->
<!--footer-->
<div id="footer_wrap">
<div class="footer_inner">
<div class="left"><img src="http://www.mamicode.com/img/footer.png" /></div>
<div class="center">
<p>聪付版权所有：版权所有2016沪ICP证888888号2016聪付 使用聪付前必读聪付协议</p>
</div>
<div class="right">
<a href="http://www.mamicode.com/servicecenter.html">帮助中心|</a>
<a href="http://www.mamicode.com/tip.html">提建议</a>
</div>
</div>
</div>
<script src="http://www.mamicode.com/js/jquery.min.js"></script>
<script type="text/javascript">
/*-------------------------------------------*/
var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
curCount = count;
var phone=$("#phone").val();//手机号码
if(phone != ""){
//设置button效果，开始计时
$("#btnSendCode").attr("disabled", "true");
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
//向后台发送处理数据
$.ajax({
type: "POST", //用POST方式传输
dataType: "text", //数据格式:JSON
url: ‘RegisterMessage.action‘, //目标地址
data: "phone=" + phone + "&code=" + code,
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (msg){ }
});
}else{
alert("手机号码不能为空！");
}
}
//timer处理函数
function SetRemainTime() {
if (curCount == 0) {
window.clearInterval(InterValObj);//停止计时器
$("#btnSendCode").removeAttr("disabled");//启用按钮
$("#btnSendCode").val("重新发送验证码");
code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
}
else {
curCount--;
$("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
}
}
</script>
</body>
<script>
$(function(){
var juddge01=juddge02=juddge03=juddge04 =juddge05= false;
//1验证手机号
$(".phone_num").blur(function(){
//alert(1)
var $phone_num = $(".phone_num").val();
var reg02 = /^1[3|4|5|7|8]\d{9}$/;//手机号
if(reg02.test($phone_num)){
console.log("邮箱或者手机号正确");
$(".po_phone_num").css("display","none");
juddge01 = true;
}else{
$(".po_phone_num").css("display","block");
juddge01 = false;
}
})
//2.验证验证码
// $(‘.yanzheng‘).blur(function(){
// //alert(1)
//
//
//
// var $yanzheng = $(".yanzheng").val();
//
// if(str == $yanzheng){
//
// console.log("验证码正确");
//
// juddge02=true;
//
// $(".form_act").css("display","none");
// }else{
//
//
//
// $(".form_act").css("display","block");
//
// juddge02 = false;
// }
// })
//
//3验证密码
$(".password_1").blur(function(){
//alert(ok)
var $password_1 = $(".password_1").val();
var reg03=/^\w{6,16}$/;
if(reg03.test($password_1)){
console.log("密码正确");
juddge03 = true;
$(".po_password").css("display","none");
}else{
$(".po_password").css("display","block");
juddge03 = false;
}
})
})
})
</script>
</html>
简单带验证的注册页面