记录注册页面实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>注冊頁面</title><!-- 初始化css --><link rel="stylesheet" href="css/base.css"><!-- register css文件 --><link rel="stylesheet" href="css/register.css"><script src="js/reg.js"></script>
</head><body><div class="w"><!-- header --><div class="header"><div class="logo"><a href="index.html"><img src="img/logo.png" alt=""></a></div></div><!-- registerarea --><div class="registerarea"><h3>注冊新用戶<em>我有賬號，去<a href="login.html">登陸</a></em></h3><div class="reg_form"><form action="demo.php"><ul><li><label for="tel">手機號:</label><input type="text" class="inp" id="tel"><span class=""> </span></li><li><label for="">QQ:</label><input type="text" class="inp" id="qq"><span></span></li><li><label for="">昵稱:</label><input type="text" class="inp" id="nc"><span></span></li><li><label for="">短信驗證碼:</label><input type="text" class="inp" id="msg"><span></span></li><li><label for="">登陸密碼:</label><input type="text" class="inp" id="pwd"><span></span></li><li class="safe">安全程度<em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">強</em></li><li><label for="">確認密碼:</label><input type="text" class="inp" id="surepwd"><span></span></li><li class="agree"><input type="checkbox">同意協議并注冊<a href="#">《知果果用戶協議》</a></li><li><input type="submit" value="完成注冊" class="over"></li></ul></form></div></div><div class="footer"><p class="links">關于我們 | 聯系我們 | 聯系客服 | 商家入駐 | 營銷中心 | 手機品優購 | 友情鏈接 | 銷售聯盟 | 品優購社區 | 品優購公益 | English Site | Contact U</p><p class="copyright">地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br> 京ICP備08001421號京公網安備110108007702</p></div></div>
</body></html>
/*清除元素默認的內外邊距 */
* {margin: 0;padding: 0
}
/*讓所有斜體 不傾斜*/
em,
i {font-style: normal;
}
/*去掉列表前面的小點*/
li {list-style: none;
}
/*圖片沒有邊框 去掉圖片底側的空白縫隙*/
img {border: 0; /*ie6*/vertical-align: middle;
}
/*讓button 按鈕 變成小手*/
button {cursor: pointer;
}
/*取消鏈接的下劃線*/
a {color: #666;text-decoration: none;
}a:hover {color: #e33333;
}button,
input {font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;/*取消輪廓線 藍色的*/outline: none;
}body {background-color: #fff;font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;color: #666
}.hide,
.none {display: none;
}
/*清除浮動*/
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}
.w {width: 1200px;margin: auto;
}.header {height: 82px;border-bottom: 2px solid #b1191a;
}.logo {padding-top: 15px;
}.registerarea {height: 580px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3 {height: 40px;border-bottom: 1px solid #ccc;background-color: #ececec;padding: 0 10px;font-weight: 400;line-height: 40px;font-size: 18px;
}.registerarea h3 em {float: right;font-size: 14px;
}.registerarea a {color: #c81623;
}.reg_form {width: 600px;height: 400px;margin: 40px auto 0;
}.reg_form li {margin-bottom: 15px;
}.reg_form label {display: inline-block;width: 100px;height: 36px;line-height: 36px;text-align: right;
}.inp {width: 238px;height: 34px;border: 1px solid #ccc;margin-left: 10px;
}.error {color: #df3033;margin-left: 10px;
}.error_icon,
.success_icon {display: inline-block;width: 20px;height: 20px;background: url(../img/error.png) no-repeat;vertical-align: middle;margin-top: -2px;
}.success {color: #40b83f;margin-left: 10px;
}.success_icon {background-image: url(../img/success.png);
}.safe {padding-left: 187px;color: #b2b2b2;
}.safe em {padding: 0 12px;color: #fff;
}.ruo {background-color: #de1111;
}.zhong {background-color: #40b83f;
}.qiang {background-color: #f79100;
}.agree {padding-top: 20px;padding-left: 100px;
}.agree input {vertical-align: middle;margin-right: 5px;
}.agree a {color: #1ba1e6;
}.over {width: 200px;height: 34px;background-color: #c81623;margin: 30px 0 0 130px;border: none;color: #fff;font-size: 14px;
}.footer {height: 120px;text-align: center;
}.links {margin-top: 20px;height: 30px;
}.copyright {line-height: 20px;
}
window.onload = function() {var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手機號碼的正則表達式var regqq = /^[1-9]\d{4,}$/; // 10000var regnc = /^[\u4e00-\u9fa5]{2,8}$/;var regmsg = /^\d{6}$/;var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;var tel = document.querySelector('#tel');var qq = document.querySelector('#qq');var nc = document.querySelector('#nc');var msg = document.querySelector('#msg');var pwd = document.querySelector('#pwd');var surepwd = document.querySelector('#surepwd');regexp(tel, regtel); // 手機號碼regexp(qq, regqq); // qq號碼regexp(nc, regnc); // 昵稱regexp(msg, regmsg); // 短信驗證regexp(pwd, regpwd); // 密碼框// 表單驗證的函數function regexp(ele, reg) {ele.onblur = function() {if (reg.test(this.value)) {// console.log('正確的');this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您輸入正確';} else {// console.log('不正確');this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正確，請從新輸入 ';}}};surepwd.onblur = function() {if (this.value == pwd.value) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您輸入正確';} else {this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 兩次密碼輸入不一致';}}}
與50位技術專家面對面20年技術見證，附贈技術全景圖
總結
- 上一篇： 记录商品查询案例
- 下一篇： 记录gulp报错The followin