记录注册页面实现
<!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