jQuery密码强度校验

HTML：

        <form class="form-horizontal" role="form" id="myform">
            <div class="form-group form-group-sm">
                <label class="col-md-2 control-label">旧密码：</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" placeholder="旧密码" ng-model="updateData.oldPassword"  required/>
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-md-2 control-label">新密码：</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" id="pass"
                           ng-model="updateData.newPassword" placeholder="新密码" required/>
                </div>
                <div class="col-md-6">
                    <div class="tips">建议使用字母、数字和符号两种以上的组合，6-20个字符</div>
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-md-2 control-label"></label>
                <div class="col-md-4 pw-strength" id="level">
                    <div class="pw-bar"></div>
                    <div class="pw-bar-on"></div>
                    <div class="pw-txt">
                        <span>弱</span>
                        <span>中</span>
                        <span>强</span>
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-md-2 control-label">确认密码：</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" placeholder="请再次输入新密码" ng-model="updateData.newPassword2"  required/>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-sm btn-search col-md-offset-4" ng-click="modifyPassword()"><i class="fa fa-edit"></i>修改</button>
                <button class="btn btn-sm btn-clear" type="reset"><i class="fa fa-mail-reply" aria-hidden="true"></i>重置</button>
             </div>
        </form>

 

CSS：

/* password level */
.pw-strength {
    position: relative;
}
.pw-bar{background: url("../images/pwd-1.png") no-repeat;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url("../images/pwd-2.png") no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
.tips{
    margin-top: 5px;
    font-size: 14px;
    color: #4caf50;
}

 

JS：

//密码强度校验
            $(function(){
                $('#pass').keyup(function () {
                    //var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                    var strongRegex = new RegExp("^(?=.{6,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!,%,&,@,#,$,^,*,?,_,~])", "g");
                    var mediumRegex = new RegExp("^(?=.{6,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                    var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                    if (false == enoughRegex.test($(this).val())) {
                        $('#level').removeClass('pw-weak');
                        $('#level').removeClass('pw-medium');
                        $('#level').removeClass('pw-strong');
                        $('#level').addClass(' pw-defule');
                        //密码小于六位的时候，密码强度图片都为灰色
                    }
                    else if (strongRegex.test($(this).val())) {
                        $('#level').removeClass('pw-weak');
                        $('#level').removeClass('pw-medium');
                        $('#level').removeClass('pw-strong');
                        $('#level').addClass(' pw-strong');
                        //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
                    }
                    else if (mediumRegex.test($(this).val())) {
                        $('#level').removeClass('pw-weak');
                        $('#level').removeClass('pw-medium');
                        $('#level').removeClass('pw-strong');
                        $('#level').addClass(' pw-medium');
                        //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
                    }
                    else {
                        $('#level').removeClass('pw-weak');
                        $('#level').removeClass('pw-medium');
                        $('#level').removeClass('pw-strong');
                        $('#level').addClass('pw-weak');
                        //如果密码为6位及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
                    }
                    return true;
                });
            })

images:

来源：https://www.cnblogs.com/miny-simp/p/8183785.html