老师看下我写的密码强度验证是对的吗？只有密码强度为弱的有效果

老师看下我写的密码强度验证是对的吗？只有密码强度为弱的有效果

<!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 &copy; 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';
}

http://img1.sycdn.imooc.com//climg/5d13136c0001b5e702020148.jpg
天青色烟雨蒙 2019-06-26
源自：项目：JS表单验证案例   3-10 作业题
6
收起

正在回答 回答被采纳积分+1

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

1回答
好帮手慕夭夭 2019-06-26 16:33:36

你好同学，有一点问题，老师把代码修改了一下，并且做了注释，同学参考调整一下：


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
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，密码的中强的正则改怎么写？
7 0 4
关于密码强度的正则表达式
32 0 3
老师，求那个换密码颜色的js代码怎么写的啊，没有头绪
25 0 3
密码匹配中，弱和中的情况无法正常实现
1 0 7
各位老师，密码的弱中强 正则匹配怎么写
1 0 6

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

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

在线咨询

领取优惠

免费试听

领取大纲

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