老师看下我写的密码强度验证是对的吗？只有密码强度为弱的有效果
来源：3-10 作业题
天青色烟雨蒙
2019-06-26 14:40:49
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css"/> </head> <body> <div class="wrap"> <!-- 头部--> <header class="header"> <div class="header_wrap w"> <!-- logo--> <div class="logo"> <div class="logo_image"></div> <h3>慕课高铁客户服务中心</h3><span>|</span><p>客户服务</p> </div> <!-- nav导航--> <div class="nav"> <a href="javascript:;">意见反馈</a> <a href="javascript:;">imooc@com</a> <a href="javascript:;">您好，请 <span>登录</span></a> <span>|</span> <a href="javascript:;">注册</a> <a href="javascript:;" class="myImooc">我的IMOOC</a> <div class="list"> <ul> <li><a href="javascript:;">未完成订单</a></li> <li><a href="javascript:;">已完成订单（改/退）</a></li> <li><a href="javascript:;">我的保险</a></li> <li><a href="javascript:;">查看个人信息</a></li> <li><a href="javascript:;">账户安全</a></li> <li><a href="javascript:;">常用联系人</a></li> <li><a href="javascript:;">重点旅客预约</a></li> <li><a href="javascript:;">遗失物品查找</a></li> <li><a href="javascript:;">服务查询</a></li> <li><a href="javascript:;">投诉</a></li> <li><a href="javascript:;">建议</a></li> </ul> </div> <span class="sanjiao_down"></span> <a href="javascript:;"> <span class="img"></span> 手机版 </a> </div> </div> </header> <!-- 主体--> <section class="section w"> <div class="title">您现在的位置 : <span>客运首页</span> <span> ></span> <span>注册</span></div> <div class="form"> <div class="top">账户信息</div> <table class="userInfo"> <tr> <td>*</td> <td>用户名：</td> <td><input type="text" class="username" placeholder="用户名设置成功后不可修改"/></td> <td><span class="usernameErr"></span></td> </tr> <tr> <td>*</td> <td>登录密码：</td> <td><input type="password" class="upwd" placeholder="6-20位字母、数字或符号"/></td> <td> <div class="red"></div> <div class="orange"></div> <div class="green"></div> </td> </tr> <tr> <td></td> <td></td> <td><span class="upwdErr"></span></td> </tr> <tr> <td>*</td> <td>确认密码：</td> <td><input type="password" class="repwd" placeholder="再次输入您的登录密码"/></td> <td><span class="repwdErr"></span></td> </tr> <tr> <td>*</td> <td>姓名：</td> <td><input type="text" class="realName" placeholder="请输入姓名"/></td> <td> <span class="realNameErr"> <a href="javascript:;" class="realName_rule">姓名填写规则</a> <a href="javascript:;" class="realName_text"></a> </span> </td> </tr> <tr> <td>*</td> <td>证件类型：</td> <td> <select name="docType"> <option value="idNumber">二代身份证</option> <option value="hongKong">港澳通行证</option> <option value="taiWan">台湾通行证</option> <option value="passport">护照</option> </select> </td> <td><span class="docTypeErr"></span></td> </tr> <tr> <td>*</td> <td>证件号码：</td> <td><input type="text" class="docNum" placeholder="请输入您的证件号码"/></td> <td><span class="docNumErr"></span></td> </tr> <tr> <td></td> <td>邮箱:</td> <td><input type="text" class="email" placeholder="请正确填写邮箱地址"/></td> <td><span class="emailErr"></span></td> </tr> <tr> <td>*</td> <td>手机号码：</td> <td><input type="text" class="phone" placeholder="请输入您的手机号码"/></td> <td><span class="phoneErr"></span></td> </tr> <tr> <td>*</td> <td>旅客类型：</td> <td> <select name="PassengerType"> <option value="adult">成人</option> <option value="children">儿童</option> <option value="student">学生</option> <option value="army">残疾军人</option> <option value="police">伤残人民警察</option> </select> </td> <td></td> </tr> <tr class="check"> <td></td> <td></td> <td style="color: #000"> <input type="checkbox"/>我已阅读并同意遵守 </td> <td><span style="color: #006ee1">《中国铁路客户服务中心网站服务条款》</span></td> </tr> </table> <input type="submit" class="submitBtn" value="下一步"/> </div> </section> <!-- 尾部--> <footer class="footer"> <div class="text"> <p>关于我们 <span>|</span> 网站声明</p> <p>Copyright © 2017 imooc.com All Rights Reseverd | 京ICP备 13046642号-2</p> </div> </footer> </div> <script src="js/index.js"></script> </body> </html>
/*通用样式*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
ul, li {
list-style: none;
}
/*版心*/
.w {
width: 1000px;
margin: 0 auto;
}
.wrap {
width: 100%;
}
/*头部*/
.header {
height: 125px;
border-bottom: 2px solid #2487c9;
background-color: #efefef;
}
.header_wrap {
position: relative;
}
.logo {
float: left;
}
.logo_image, .logo h3, .logo span, .logo p {
float: left;
line-height: 125px;
margin: 0 5px;
}
.logo_image {
width: 110px;
height: 110px;
background: url("../img/logo.png");
}
.logo h3 {
font-weight: 400;
font-size: 20px;
}
.logo span {
font-weight: 700;
font-size: 24px;
}
.logo p {
color: #666666;
font-size: 16px;
}
.nav {
float: left;
line-height: 125px;
position: absolute;
right: 0;
top: 0;
}
.nav a {
margin: 0 5px;
font-size: 14px;
}
.sanjiao_down {
width: 0;
height: 0;
overflow: hidden;
font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
border-width: 10px;
border-style: solid dashed dashed dashed; /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
border-color: #000 transparent transparent transparent;
}
.nav a:last-child span {
display: inline-block;
width: 15px;
height: 25px;
background: url("../img/img1.png");
background-size: 100% 100%;
vertical-align: middle;
}
.nav a:nth-child(2),
.nav a:nth-child(3) span {
color: #fa7403;
}
.nav a:nth-child(6) {
position: relative;
padding: 20px 0;
}
.list {
width: 170px;
height: 350px;
border: 1px solid #fa7403;
position: absolute;
top: 85px;
left: 330px;
background-color: #FCFCFC;
padding: 12px;
z-index: 99;
display: none;
}
.list li {
height: 30px;
line-height: 30px;
}
.list li:nth-child(3),
.list li:nth-child(6),
.list li:nth-child(9) {
border-bottom: 1px dotted #ddd;
border-top: 1px dotted #ddd;
}
/*主体*/
.title {
margin: 10px 0;
}
.title span {
color: #636363;
}
.form {
height: 630px;
border: 1px solid #fb7403;
border-radius: 10px;
position: relative;
}
.top {
height: 45px;
background-color: #fb7403;
color: #fff;
line-height: 45px;
padding-left: 15px;
border: 1px solid #fb7403;
border-radius: 10px 10px 0 0;
}
.userInfo {
margin: 50px auto;
border-spacing: 15px;
text-align-last: justify;
}
.userInfo tr td:first-child {
color: red;
}
.userInfo tr td:nth-child(2) {
width: 100px;
}
.userInfo tr td:nth-child(3) {
width: 185px;
}
.userInfo tr td:nth-child(3) input,
.userInfo tr td:nth-child(3) select {
padding: 3px 6px;
}
.userInfo tr td:last-child {
color: #fb7403;
}
.userInfo tr:nth-child(2) td:last-child div {
width: 50px;
height: 10px;
float: left;
margin-right: 5px;
background-color: #ddd;
}
.userInfo .realName_rule {
text-decoration: underline;
color: red;
position: relative;
}
.userInfo .realName_text {
position: absolute;
display: block;
width: 502px;
height: 282px;
z-index: 99;
background: url("../img/text.jpg");
display: none;
}
.realNameErr{
position: relative;
}
.submitBtn {
width: 235px;
height: 40px;
background-color: #fb7403;
border-radius: 5px;
color: #fff;
line-height: 40px;
text-align: center;
border: 0;
outline: 0;
position: absolute;
left: 50%;
margin-left: -117.5px;
bottom: 25px;
cursor: pointer;
}
.submitBtn:hover {
background-color: #fff;
color: #fb7403;
border: 1px solid #fb7403;
}
/*页脚*/
.footer {
height: 105px;
background-color: #dcdcdc;
border-top: 2px solid #2487c9;
margin-top: 125px;
text-align: center;
position: relative;
}
.footer .text {
width: 600px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -300px;
}
.footer p {
line-height: 35px;
color: #999999;
}/**
* Created by Lily on 2019/6/19.
*/
var myImooc = document.querySelector('.myImooc'),
list = document.querySelector('.nav .list'),
username = document.querySelector('.username'),
upwd = document.querySelector('.upwd'),
repwd = document.querySelector('.repwd'),
realName = document.querySelector('.realName'),
docNum = document.querySelector('.docNum'),
email = document.querySelector('.email'),
phone = document.querySelector('.phone'),
submitBtn = document.querySelector('.submitBtn');
realName_rule = document.querySelector('.realName_rule'),
realName_text = document.querySelector('.realName_text'),
usernameErr = document.querySelector('.usernameErr'),
upwdErr = document.querySelector('.upwdErr'),
red = document.querySelector('.red'),
orange = document.querySelector('.orange'),
green = document.querySelector('.green'),
repwdErr = document.querySelector('.repwdErr'),
realNameErr = document.querySelector('.realNameErr'),
docNumErr = document.querySelector('.docNumErr'),
emailErr = document.querySelector('.emailErr'),
phoneErr = document.querySelector('.phoneErr'),
patter_username = /^[a-zA-Z0-9_]{6,30}$/,
patter_upwd = /^\w{6,20}$/,
patter_realName = /^[\u4E00-\u9FA5a-zA-Z]{3,30}/,
patter_docNum = /^\d{17}(?:\d|x|X)$/,
patter_email = /^\w+@\w+[\.\w]+$/,
patter_phone = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
moveTosub = false;//判断鼠标是否移入下拉列表
myImooc.onmouseover = function () {
this.style.color = '#fa7403';
list.style.display = 'block';
}
myImooc.onmouseout = function () {
if (moveTosub) {
list.style.display = 'block';
} else {
list.style.display = 'none';
}
}
list.onmouseover = function () {
this.style.display = 'block';
moveTosub = true;
}
list.onmouseout = function () {
this.style.display = 'none';
moveTosub = false;
}
//username
username.onblur = function () {
if (patter_username.exec(this.value)) {
usernameErr.innerHTML = '用户名输入正确';
usernameErr.style.color = 'green';
} else {
usernameErr.innerHTML = "6-30位字母、数字或'_',字母开头";
usernameErr.style.color = 'red';
}
}
//upwd
upwd.onblur = function () {
if (patter_upwd.exec(this.value)) {
upwdErr.innerHTML = '';
if (/^[1-9]{6,20}$/.test(this.value)||/^[a-zA-Z]{6,20}$/.test(this.value)||/^\W{6,20}$/.test(this.value)) {
//密码强度为弱
red.style.display = 'block';
red.style.backgroundColor='red';
} else if (/^[1-9|a-z]{6,20}$/.test(this.value)||/^[\W|a-z]{6,20}]$/i.test(this.value)||/^[\W|1-9]$/.test(this.value)) {
//密码强度为中
orange.style.display = 'block';
orange.style.backgroundColor='orange';
} else if (/^\W[a-zA-Z]{6,20}$/.test(this.value)) {
//密码强度为强
green.style.display = 'block';
green.style.backgroundColor='green';
}
} else {
upwdErr.innerHTML = '请输入6-20位字母、数字或符号';
upwdErr.style.color = 'red';
}
}
//repwd
repwd.onblur = function () {
if (patter_upwd.exec(this.value)) {
if (this.value === upwd.value) {
repwdErr.innerHTML = '两次密码输入一致';
repwdErr.style.color = 'green';
} else {
repwdErr.innerHTML = '两次密码输入不一致';
repwdErr.style.color = 'red';
}
} else {
repwdErr.innerHTML = '密码不能为空';
repwdErr.style.color = 'red';
}
}
//realName
realName.onblur = function () {
if (patter_realName.exec(this.value)) {
realNameErr.innerHTML = '姓名输入正确';
realNameErr.style.color = 'green';
} else {
realNameErr.innerHTML = '姓名只能包含中文或者英文,且字符在3-30个之间';
realNameErr.style.color = 'red';
}
}
realNameErr.onmouseover=function(){
realName_text.style.display='block';
}
realNameErr.onmouseout=function(){
realName_text.style.display='none';
}
//docNum
docNum.onblur = function () {
if (patter_docNum.exec(this.value)) {
docNumErr.innerHTML = '号码输入正确';
docNumErr.style.color = 'green';
} else {
docNumErr.innerHTML = '18位数字，最后一位可以是大写或者小写的x';
docNumErr.style.color = 'red';
}
}
//email
email.onblur = function () {
if (patter_email.exec(this.value)) {
emailErr.innerHTML = '邮箱格式正确';
emailErr.style.color = 'green';
} else {
emailErr.innerHTML = '请输入正确的邮箱';
emailErr.style.color = 'red';
}
}
//phone
phone.onblur = function () {
if (patter_phone.exec(this.value)) {
phoneErr.innerHTML = '手机格式正确';
phoneErr.style.color = 'green';
} else {
phoneErr.innerHTML = '您输入的手机号码不是有效的格式!';
phoneErr.style.color = 'red';
}
}
//submitBtn
submitBtn.onclick = function () {
username.onblur();
upwd.onblur();
repwd.onblur();
realName.onblur();
docNum.onblur();
email.onblur();
phone.onblur();
if (patter_username.test(username.value) &&
patter_upwd.test(upwd.value) &&
patter_red.test(red.value) &&
patter_realName.test(realName.value) &&
patter_docNum.test(docNum.value) &&
patter_email.test(email.value) &&
patter_phone.test(phone.value)) {
window.open('https://www.imooc.com', '_self');
} else {
alert('验证失败');
}
}
//realName_rule
realName_rule.onmouseover = function () {
realName_text.style.display = 'block';
}
realName_rule.onmouseout = function () {
realName_text.style.display = 'none';
}
写回答
1回答
-
好帮手慕夭夭
2019-06-26
你好同学，有一点问题，老师把代码修改了一下，并且做了注释，同学参考调整一下：
upwd.onblur = function() {
// 先对密码的位数进行验证
var patt = /\S{6,20}/;
if (!patt.test(this.value)) {
upwdErr.innerHTML = '请输入6-20位字母、数字或符号';
upwdErr.style.color = 'red';
// 当回删密码不符合的时候，要修改相对应的样式
red.style.backgroundColor = '#ddd';
orange.style.backgroundColor = '#ddd';
green.style.backgroundColor = '#ddd';
} else {
upwdErr.innerHTML = '';
}
if (/^[1-9]{6,20}$/.test(this.value) || /^[a-zA-Z]{6,20}$/.test(this.value) || /^\W{6,20}$/.test(this.value)) {
//密码强度为弱
// red.style.display = 'block';
// 在每一个验证中，都要设置强度条的颜色，这样当密码回删的时候，能够恢复当前密码强度状态
red.style.backgroundColor = 'red';
orange.style.backgroundColor = '#ddd';
green.style.backgroundColor = '#ddd';
// 这里少个i //多一个] //这里没验证位数，以及少一个i
} else if (/^[1-9|a-z]{6,20}$/i.test(this.value)||/^[\W|a-z]{6,20}$/i.test(this.value)||/^[\W|1-9]{6,20}$/i.test(this.value)) {
//密码强度为中
// orange.style.display = 'block'; 默认就是block，不用设置block
red.style.backgroundColor = 'red';
orange.style.backgroundColor = 'orange';
green.style.backgroundColor = '#ddd';
// 去掉^和$因为这里没有使用|表示或，所以^\W表示必须匹配非单词字符。
} else if (/\W[A-Za-z0-9_]*/.test(this.value)) {
//密码强度为强
// green.style.display = 'block';
red.style.backgroundColor = 'red';
orange.style.backgroundColor = 'orange';
green.style.backgroundColor = 'green';
}
}
祝学习愉快，望采纳。
0
相似问题