老师，求那个换密码颜色的js代码怎么写的啊，没有头绪
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<header class="header">
<div class="header__wrap">
<div class="header__logo">慕课高铁客户服务中心 <strong>|</strong>
<span class="header__logo__client">客户服务</span>
</div>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-list__item">
<span>意见反馈 </span>
<a href="#" class="header__nav-list__item_orange">imooc@.com</a>
</li>
<li class="header__nav-list__item">
<span>您好,请 </span>
<a href="#" class="header__nav-list__item_orange">登录</a> | <a href="#">注册</a>
</li>
<li class="header__nav-list__item header__nav-list__imooc">
<span>我的IMOOC</span>
<div class="header__nav-list__imooc__triangle"></div>
<div class="header__nav-list__imooc__menu">
<ul class="header__nav-list__imooc__menu__list">
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">未完成订单</a><br/>
<a href="#">已完成订单(改/退)</a>
</li>
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">我的保险</a>
</li>
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">查看个人信息</a><br/>
<a href="#">账户安全</a>
</li>
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">常用联系人</a>
</li>
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">重点旅客预约</a><br/>
<a href="#">遗失物品查找</a>
</li>
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">服务查询</a>
</li>
<li class="header__nav-list__imooc__menu__list__item">
<a href="#">投诉</a><br/>
<a href="#">建议</a>
</li>
</ul>
</div>
</li>
<li class="header__nav-list__item">
<img src="./img/未标题-1.png" class="header__nav-list__phone__pic">
<span><a href="#">手机版</a></span>
</li>
</ul>
</nav>
</div><!-- header__wrap -->
</header>
<!-- 主页区 -->
<div class="content">
<h3>您现在所在的位置：<span>客运首页</span> > <span>注册</span></h3>
<div class="main">
<div class="main_title">账户信息</div>
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-userAccount"><span>用户名</span>：</label>
<input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
<span class="main_item_"></span>
</div>
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-userPass"><span>登录密码</span>：</label>
<input type="password" id="userPass" placeholder=" 6-20位字母,数字或符号">
<span class="main_item_">
<span class="red">1</span>
<span class="orange">2</span>
<span class="green">3</span>
</span>
</div>
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-userPass_"><span>确认密码</span>：</label>
<input type="password" id="userPass_" placeholder=" 再次输入您的登录密码">
<span class="main_item_"></span>
</div>
<!-- <p class="main_item_"></p> -->
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-userName"><span>姓名</span>：</label>
<input type="text" id="userName" placeholder=" 请输入姓名">
<div class="namerule">
<a href="javascript:;">姓名填写规则</a>
<div class="namerule_"><p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p>
<p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。</p>
<p>3.姓名中有繁体字无法输入时，可用简体替代。</p>
<p>4.姓名较长，汉字与英文字符会计超过30个(1个汉字算2个字符)的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符(空格字符不输入)，其中英文字符输入时不区别大小写</p>
</div>
</div>
<span class="main_item_"></span>
</div>
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-idType"><span>证件类型</span>：</label>
<select id="idType">
<option value="二代身份证">二代身份证</option>
<option value="港澳通行证">港澳通行证</option>
</select>
</div>
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-information"><span>证件号码</span>：</label>
<input type="text" id="information" placeholder=" 请输入您的证件号码">
<span class="main_item_"></span>
</div>
<!-- <p class="main_item_"></p> -->
<div class="main_item">
<span class="main_item-important" style="color: #fff;">*</span>
<label for="" class="main_item-email"><span>邮箱</span>：</label>
<input type="email" id="email" placeholder=" 请正确填写邮箱地址">
<span class="main_item_"></span>
</div>
<!-- <p class="main_item_"></p> -->
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-telephone"><span>手机号码</span>：</label>
<input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
<span class="main_item_"></span>
</div>
<!-- <p class="main_item_"></p> -->
<div class="main_item">
<span class="main_item-important">*</span>
<label for="" class="main_item-userType"><span>旅客类型</span>：</label>
<select id="userType">
<option value="成人">成人</option>
<option value="未成年">未成年</option>
</select>
</div>
<div id="main_end">
<div id="choose"><input type="checkbox" id="choose">我已阅读并同意遵守<a href="javascript:;">《中国铁路客户服务中心网站服务条款》</a></div>
<button id="handup">下一步</button>
</div>
</div>
</div>
<!-- 尾部区域 -->
<footer class="footer">
<p>关注我们|网站声明</p>
<P>Copyright© 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2 | 网站声明</P>
</footer>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
body{min-width: 1200px;}
a{color: inherit;}
/* 页头区 */
header{
background-color: rgb(239, 239, 239);
border-bottom: 2px solid rgb(36, 135, 201);
}
.header__nav-list__item span{cursor: pointer;}
.header__wrap{
width: 1250px;
height: 110px;
margin: 0 auto;
position: relative;
}
/* 头部左边logo */
.header__logo{
width: 500px;
height: 100px;
line-height: 100px;
text-indent: 100px;
letter-spacing: 2px;
font-size: 24px;
position: absolute;
top: 50%;
margin-top: -50px;
left: 0;
background:url('../img/logo.png') left center no-repeat;
background-size: 100px 100px;
cursor: pointer;
}
.header__logo__client{
font-size: 18px;
color: rgb(102, 102, 102);
}
/* 头部右边导航 */
.header__nav{
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
right: 0;
}
.header__nav-list{
height: 100px;
line-height: 100px;
}
.header__nav-list__item{
float: left;
padding: 0 10px;
letter-spacing:1px;
}
.header__nav-list__item_orange{
color: rgb(251, 116, 3);
}
.header__nav-list__imooc{
position: relative;
}
.header__nav-list__imooc__triangle{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
position: absolute;
top: 45%;
right: -15px;
cursor: pointer;
}
/* nav导航 隐藏下拉框 */
.header__nav-list__imooc__menu{
width: 163px;
height: 300px;
position: absolute;
left: 0;
top: 70px;
border: 1.5px solid rgb(251, 116, 3);
background-color: rgb(247, 247, 247);
overflow: hidden;
display: none;
}
.header__nav-list__imooc:hover
.header__nav-list__imooc__menu{
display: block;
}
.header__nav-list__imooc__menu__list{
font-size: 13px;
color: rgb(119, 119, 119);
text-align: center;
padding: 0 10px;
overflow: hidden;
}
.header__nav-list__imooc__menu__list__item:last-child{
border-bottom: none;
}
.header__nav-list__imooc__menu__list__item{
width: 130px;
line-height: 26px;
text-align: left;
padding-left: 10px;
border-bottom: 1.5px dotted rgb(119, 119, 119);
}
/* nav导航 手机版 */
.header__nav-list__phone{
padding-left: 50px;
}
.header__nav-list__phone__pic{
width: 20px;
vertical-align: middle;
margin-left: 40px;
}
/* 判断 */
.main_item_{
position: absolute;
top: 50%;
margin-top: -10px;
left: 50%;
margin-left: -40px;
}
/* 主体头部区 */
.content{
width: 1250px;
margin: 0 auto;
}
h3{
font-size: 20px;
color: #000;
height: 45px;
line-height: 45px;
}
h3 span{
font-size: 18px;
color: #636363;
font-weight: normal;
}
.main_item_pass{
}
.main_item_ .red,
.main_item_ .orange,
.main_item_ .green{
display: inline-block;
width: 40px;
height: 8px;
}
.main_item_ .red{
background-color: red;
}
.main_item_ .orange,
.main_item_ .green{
background-color:#dddddd;
}
.main{
height: 600px;
background: white;
border-radius: 10px;
border: 2px solid rgb(251, 116, 3);
margin-bottom: 100px;
}
.main_title{
background-color: rgb(251, 116, 3);
color: #fff;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 20px;
padding-left: 20px;
border-radius: 6px;
}
.main_item{
width: 60%;
margin: 20px auto;
height: 20px;
line-height: 20px;
font-size: 15px;
position: relative;
}
.main_item:nth-child(2){
margin-top: 50px;
}
label span{
display: inline-block;
text-align-last: justify;
width: 60px;
}
.main_item-important{
color: red;
}
.main_item input{
position: absolute;
width: 210px;
height: 20px;
top: 50%;
left: 15%;
margin-top: -10px;
}
select{
position: absolute;
top: 50%;
left: 15%;
margin-top: -10px;
width: 210px;
}
.main_.item_ {
width: 60%;
height: 30px;
border-bottom: 0.5px solid #6385d1;
border-radius: 2px;
font-size: 15px;
color: rgb(251, 116, 3);
letter-spacing: 2px;
font-weight: lighter;
padding-left: 10px;
margin: 0;
margin-left: 5%;
}
.main_item .namerule{
position: relative;
left: 350px;
top: -20px;
}
.main_item .namerule a{
color: #fb7403;
text-decoration: underline;
font-size: 15px;
}
.main_item .namerule a:hover+.namerule_{
display: block;
}
.main_item .namerule .namerule_{
display: none;
width: 350px;
height: 220px;
position: absolute;
border: 1px solid blue;
font-size: 10px;
left: 95px;
top: 15px;
background: #ffffff;
}
.main_item .namerule .namerule_ p{
color: #6c6c6c;
margin: 5px 10px;
}
#main_end{
text-align: center;
height: 50px;
line-height: 50px;
width: 100%;
letter-spacing: 2px;
}
#main_end #choose{
margin-right: 10px;
}
#main_end #choose a{
color: #006ee1;
}
#main_end #handup{
width: 230px;
height: 38px;
border: none;
background-color: #fb7403;
color: white;
border-radius: 3px;
margin-top: 35px;
}
/* 页脚区域 */
footer{
display: block;
width: 100%;
padding: 20px 0;
background: #eee;
border-top: 2px solid rgb(36, 136, 201);
text-align: center;
color: #ccc;
}
footer p{
line-height: 40px;
}
/*获取元素节点*/
var tips = className("main_item_"),
userAccount = byId("userAccount"),
userPass = byId("userPass"),
userPass_ = byId("userPass_"),
userName = byId("userName"),
nameRule = className("namerule")[0],
information = byId("information"),
email = byId("email"),
phone = byId("telephone"),
choose = byId("choose"),
submit = byId("handup"),
red = className("red")[0],
orange = className("orange")[0],
green = className("green")[0];
/*封装获取元素节点函数*/
function className(name) {
return document.getElementsByClassName(name);
}
function byId(id) {
return document.getElementById(id)
}
// 获取正则
var regexp = {
userAccount: /^[a-z]\w{5,29}$/i,
userPass: /^\S{6,20}$/,
userName: /^[\u4e00-\u9fa5|a-zA-Z]{3,30}$/,
idName: /^\d{17}[\dxX]$/,
email: /^\w+@\w+\.\w{2,3}$/,
phone: /^1[3|4|5|7|8][0-9]{9}$/
}
// 判断为真假
var test = {
test1: false,
test2: false,
test3: false,
test4: false,
test5: false,
test6: false,
}
// 用户名
userAccount.onblur = function () {
if (!this.value) {
tips[0].innerHTML = "6-30位字母、数字或'_'，字母开头";
tips[0].style.color = "red";
} else {
if (regexp.userAccount.exec(userAccount.value)) {
tips[0].innerHTML = "用户名输入正确";
tips[0].style.color = "green";
test.test1 = true;
} else {
tips[0].innerHTML = "6-30位字母、数字或'_'，字母开头";
tips[0].style.color = "red";
}
}
}
// 变量接收密码框的值
var pwdValue = '密码框的值';
// 定义数量正则
var patt = /^\S{6,20}$/;
// 定义弱-中-强的正则
var pattern1 = /^\d{6,20}$|^[a-zA-Z]{6,20}$|^(\W|_){6,20}$/,
pattern2 = /^[\da-zA-Z]{6,20}$|^[(\W|_)a-zA-Z]{6,20}$|^[(\W|_)\d]{6,20}$/,
pattern3 = /^[(\W|_)\da-zA-Z]{6,20}$/;
// 登录密码
userPass.onblur = function () {
//当数量不符合时的操作
if (!patt.test(pwdValue)) {
// 提示信息
// tips[1].innerHTML = "6-20位字母、数字或'_'，字母开头";
} else {
//当数量符合时的操作
// 弱
if (pattern1.test(pwdValue)) {
// 改变后面小方块颜色
red.style.backgroundColor = "red";
} else if (pattern2.test(pwdValue)) {
// 中
// 改变后面小方块颜色
orange.style.backgroundColor = "orange";
} else if (pattern3.test(pwdValue)) {
// 强
// 改变后面小方块颜色
green.style.backgroundColor = "green";
}
}
}
正在回答
同学你好，同学的代码，第三强度密码的正则书写是正确的，没有效果是因为方块样式设置的不对，建议：可以调整方块的样式，密码为弱时，设置第一个方块背景为红色，其他方块背景为灰色；密码为中时，设置第一个方块背景为红色，第二个方块背景为橙色，其他方块背景为灰色；密码为强时，设置第一个方块背景为红色，第二个方块背景为橙色，第三个方块背景为绿色
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星