老师，密码强度似乎有点问题。

老师，密码强度似乎有点问题。


# 具体遇到的问题
密码强度这里的正则里的符号好像输入除了下划线“_”以外的其他符号都显示密码不正确
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>assignment</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
    <div class="header__wrap">
        <div class="header__logo">慕课高铁客户服务中心&nbsp;<strong>|</strong>&nbsp;<span>客户服务</span></div>
        <nav class="header__nav">
            意见反馈
            <a href="#" class="header__nav-item highlight-text">imooc@.com</a>
            <span>您好，请</span>
            <a href="#" class="header__nav-item highlight-text">登录</a>
            <strong>|</strong>
            <a href="#" class="header__nav-item">注册</a>
            <a href="#" class="header__nav-item myMooc">
                <span>我的IMOOC</span>
                <div class="menu">
                    <ul>
                        <li>未完成订单</li>
                        <li class="underline">已完成订单（改/退）</li>
                        <li class="underline">我的保险</li>
                        <li>查看个人信息</li>
                        <li class="underline">账户安全</li>
                        <li class="underline">常用联系人</li>
                        <li>重点旅客预约</li>
                        <li class="underline">遗失物品查找</li>
                        <li class="underline">服务查询</li>
                        <li>投诉</li>
                        <li>建议</li>
                    </ul>
                </div>
            </a>
            <a href="#" class="header__nav-item phone"><img src="img/未标题-1.png" class="iphone">手机版</a>
        </nav>
    </div>
</div>

<div class="content">
    <div class="txt">您现在的位置：<span>客运首页 > 注册</span></div>
    <div id="total">
        <div id="title"><span>账户信息</span></div>
        <div class="total__item">
            <div class="item">
                <span class="important">*</span>
                <label for="userAccount">用户名 :</label>
                <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
                &nbsp;&nbsp;<span class="item_"></span>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="userPass">登陆密码 :</label>
                <input type="password" id="userPass" placeholder=" 6-20位字母,数字或符号">
                &nbsp;&nbsp;<span class="red"></span>&nbsp;<span class="orange"></span>&nbsp;<span class="green"></span>
            </div>
            <p class="item_"></p>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="userPass_">确认密码 :</label>
                <input type="password" id="userPass_" placeholder="再次输入您的登录密码">
                &nbsp;&nbsp;<span class="item_"></span>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="userName">姓名 :</label>
                <input type="text" id="userName" placeholder=" 请输入姓名">
                &nbsp;&nbsp;<span class="item_"></span>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="information_">证件类型 :</label>
                <select style="width: 180px;">
                    <option>二代身份证</option>
                    <option>一代身份证</option>
                </select>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="information">证件号码 :</label>
                <input type="text" id="information" placeholder=" 请输入您的证件号码">
                &nbsp;&nbsp;<span class="item_"></span>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="email">邮箱 :</label>
                <input type="email" id="email" placeholder=" 请正确填写邮箱地址">
                &nbsp;&nbsp;<span class="item_"></span>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="telephone">手机号码 :</label>
                <input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
                &nbsp;&nbsp;<span class="item_"></span>
            </div>
            <br>
            <!--__________________________________________________________________________________________________-->
            <div class="item">
                <span class="important">*</span>
                <label for="information">旅客类型 :</label>
                <select style="width: 180px;">
                    <option>成人</option>
                    <option>儿童</option>
                    <option>残疾人</option>
                </select>
            </div>
            <br>
            <!--_____________________________________________________________________________________________-->
            <div id="end">
                <input type="checkbox" id="choose">
                <span>我已阅读并同意遵守<span class="spanOne">《中国铁路客户服务中心网站服务条款》</span></span>
            </div>
            <input type="submit" value="下一步" class="iSubmit">
        </div>
    </div>
</div>

<div class="foot">
    <div class="foot__one">
        <div>关于我们&nbsp;|&nbsp;网站声明</div>
        <div>Copyright&nbsp;&copy;&nbsp;2017&nbsp;imooc.com&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;|&nbsp;京ICP备&nbsp;13046642号-2</div>
    </div>
</div>

<script src="js/index.js"></script>   
</body>
</html>

CSS：

/* 基础样式 */
body{
    background-color: #fff; 
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "Microsoft Yahei",微软雅黑
}
a{
    text-decoration: none;
    color: black;
}
ul{
    list-style: none;
}

/* 头部导航条 */
.header{
    width: 100%;
    height: 124px;
    border-bottom: 2px solid rgb(36,135,201);
    background-color: #efefef;
}
.header__wrap{
    width: 1260px;
    height: 124px;
    margin: 0 auto;
    position: relative;
    /* border: 1px solid red; */
}
.header__logo{
    height: 110px;
    font-size: 21px;
    line-height: 124px;
    background: url(../img/logo.png) left center no-repeat;
    text-indent: 120px;
    cursor: pointer;
}
.header__logo span{
    font-size: 15px;
    color: #666666;
}
.header__nav{
    position: absolute;
    right: 20px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
}
.header__nav span{
    margin-left: 10px;
}
.header__nav-item{
    color: black;
}
.highlight-text{
    font-size: 13px;
    color: rgb(251,116,3);
}
.myMooc{
    margin-left: 10px;
    position: relative;
}
.menu{
    width: 150px;
    height: auto;
    border: 2px solid rgb(251,116,3);
    position: absolute;
    top: 19px;
    left: 0;
    display: none;
}
.myMooc:hover .menu{
    display: block;
}

.myMooc .menu ul{
    padding: 0;
    margin: 15px 10px 5px;
    font-size: 13px;
    color: gray;
}
.myMooc .menu ul li{
    margin-top: 8px;
}
.myMooc .menu ul li:hover{
    background-color: black;
    color: rgb(251,116,3);
}
.underline{
    border-bottom: 2px dotted gray;
}
.phone{
    margin-left: 77px;
    position: relative;
}
.iphone{
    width: 13px;
    height: 16px;
    position: absolute;
    top: 5px;
    left: -15px;
}

/* 内容部分 */
.content{
    width: 100%;
    height: 870px;
    position: relative;
}
.txt{
    text-align: center;
    margin: 13px 0;
    position: absolute;
    left: 20%;
}
.txt span{
    color: #636363;
    font-size: 13px;
}
#total{
    height: 700px;
    width: 60%;
    position: absolute;
    left: 20%;
    top: 46px;
    border: 1px solid rgb(251,116,3);
    border-radius: 10px;
    position: relative;
}
#title{
    width: 100%;
    background: rgb(251,116,3);
    border-radius: 10px;
    height: 43px;
    line-height: 43px;
    color: white;
    border-right: 1px solid rgb(251,116,3);
    font-size: 17px;
    position: relative;
}
#title span{
    position: absolute;
    left: 2%;
}
.total__item{
    position: absolute;
    left: 25%;
    top: 120px;
}
.total__item .item .important{
    color: rgb(251,116,3);
}

.red,.orange,.green{
    display: inline-block;
    width: 30px;
    height: 5px;
    /* background-color: red; */
    /* border: 2px solid red; */
}


.spanOne{
    color: rgb(36,135,201);
}
.iSubmit{
    width: 231px;
    height: 37px;
    background: rgb(251,116,3);
    border: 1px solid rgb(251,116,3);
    border-radius: 5px;
    position: absolute;
    bottom: -70px;
    left: 50%;
    margin-left: -100px;
}

/* 尾脚部分 */
.foot{
    width: 100%;
    height: 110px;
    border-top: 2px solid rgb(36,135,201);
    background-color: #dcdcdc;

}
.foot .foot__one{
    text-align: center;
    line-height: 35px;
    margin-top: 20px;
    color: #999999;
}

JS：

var userAccount = document.querySelector("#userAccount"),//获取用户名
    userPass = document.querySelector("#userPass"),//获取密码
    userPass_ = document.querySelector("#userPass_"),//获取确认密码
    userName = document.querySelector("#userName"),//获取姓名
    information = document.querySelector("#information"),//获取身份证号码
    email = document.querySelector("#email"),//获取邮箱号码
    telephone = document.querySelector("#telephone"),//获取手机号码
    items = document.querySelectorAll(".item_"),//获取所有提示文段的下标
    red = document.querySelector(".red")
    orange = document.querySelector(".orange")
    green = document.querySelector(".green")
var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false, test6 = false, test7 = false;

userAccount.onfocus=function(){
    items[0].innerHTML="6-30位字母、数字或'_'，字母开头";
    items[0].style.color = "rgb(251,116,3)";
};
userAccount.onblur=function(){
    var reg=/^\w{6,30}$/;
    if(this.value==""){
        items[0].innerHTML="6-30位字母、数字或'_'，字母开头";
        items[0].style.color = "red";
    }else{
        if(!reg.exec(userAccount.value)){
            items[0].innerHTML="6-30位字母、数字或'_'，字母开头";
            items[0].style.color = "red";
        }else{
            items[0].innerHTML="用户名输入正确";
            items[0].style.color = "green";
            test1 = true;
        }
    }
}
//-------------------------------------------------------------账号结束;

userPass.onfocus = function () {
    items[1].innerHTML = "6-20位字母,数字或符号";
    items[1].style.color = "rgb(251,116,3)";
};
userPass.onblur = function () {
    var reg = /^\w{6,20}$/;
    var pattern1=/^\d{6,20}$|^[a-zA-Z]{6,20}$|^[(\W|_)\d]{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}$/;
    if (this.value == "") {
        items[1].innerHTML = "6-20位字母,数字或符号";
        items[1].style.color = "red";
    } else {
        if (!reg.test(userPass.value)) {
            items[1].innerHTML = "请输入6-20位字母,数字或符号";
            items[1].style.color = "red";
        } else {
            if(pattern1.test(userPass.value)){
                red.style.backgroundColor="red";
                orange.style.backgroundColor="gray";
                green.style.backgroundColor="gray";
            }else if(pattern2.test(userPass.value)){
                red.style.backgroundColor="red";
                orange.style.backgroundColor="orange";
                green.style.backgroundColor="gray";
            }else if(pattern3.test(userPass.value)){
                red.style.backgroundColor="red";
                orange.style.backgroundColor="orange";
                green.style.backgroundColor="green";
            }
            items[1].innerHTML="";
            test2 = true;
        }
    }
};
/*------------------------------------------------------------------密码结束*/​

在这里输入代码，可通过选择【代码语言】突出显示
慕慕666666 2020-12-04
源自：项目：JS表单验证案例   3-10 作业题
29
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕言 回答被采纳获得+3积分 2020-12-05 14:20:01

同学你好，老师这边使用上条回复中的代码，在谷歌浏览器测试，效果是可以的（为了让同学看的更清晰，老师把密码输入框的type修改为了text），如下：

http://img1.sycdn.imooc.com//climg/5fcb2573090f92a805570165.jpg

http://img1.sycdn.imooc.com//climg/5fcb258709bb30c704260062.jpg

同学可以直接复制老师提供的代码测试，如果还是不可以的话，建议同学把修改后的js代码粘贴上来，如果代码多不好粘贴，可以先完成其他的效果，完成项目之后，上传作业，如下位置可以上传作业：

http://img1.sycdn.imooc.com//climg/5fcb264409c78ebc14440488.jpg

批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业。

祝学习愉快~

0
收起回答
好帮手慕言 2020-12-05 11:13:08

同学你好，正则需要做一些修改，如下：

var reg = /^\S{6,20}$/;
    var pattern1 = /^\d{6,20}$|^[a-zA-Z]{6,20}$|^(\W|_){6,20}$/,
        pattern2 = /^[\d|a-zA-Z]{6,20}$|^[(\W|_)|a-zA-Z]{6,20}$|^[(\W|_)\d]{6,20}$/,
        pattern3 = /^[(\W|_)\d a-zA-Z]{6,20}$/;

这是一个项目作业，作业完成之后，在作业区域是可以上传作业的。批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业。

​祝学习愉快~


0
收起回答
  • 提问者 慕慕666666 #1

    http://img1.sycdn.imooc.com//climg/5fcaff6b09b2ddb607370227.jpg

    老师，数字与符号组合有点问题

    2020-12-05 11:34:09
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，密码的中强的正则改怎么写？
7 0 4
老师，求那个换密码颜色的js代码怎么写的啊，没有头绪
25 0 3
老师这道题目怎么判断密码强度为等级二
18 1 2
老师看下我写的密码强度验证是对的吗？只有密码强度为弱的有效果
6 0 1
关于密码强度的正则表达式
32 0 3

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师