zoukankan      html  css  js  c++  java
  • 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>
    View Code

    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;
    }
    View Code

    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;
                    });
                })
    View Code

    images:

  • 相关阅读:
    unsupported jsonb version number 123
    如何在MPlayer上支持RTSP
    TDengine 时序数据库的 ADO.Net Core 提供程序 Maikebing.EntityFrameworkCore.Taos
    如何使用IoTSharp对接ModBus?
    如何从源码启动和编译IoTSharp
    Asp.Net Core 自动适应Windows服务、Linux服务、手动启动时的内容路径的扩展方法
    MQTTnet 的Asp.Net Core 认证事件的扩展
    Asp.Net Core 中利用QuartzHostedService 实现 Quartz 注入依赖 (DI)
    The remote certificate is invalid according to the validation procedure 远程证书验证无效
    settings插拔式源码
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8183785.html
Copyright © 2011-2022 走看看