密码强度验证及包含三种字符及以上

weixin_57408495

已于 2022-05-06 10:57:22 修改

阅读量1k

点赞数

文章标签： javascript java webview html css

于 2022-05-05 10:12:53 首次发布

本文链接：https://blog.csdn.net/weixin_57408495/article/details/124582786

版权

html页面

<style type="text/css">
    /*.strengthLv0 {*/
    /*    height: 6px;*/
    /*    width: 120px;*/
    /*    border: 1px solid #ccc;*/
    /*    padding: 2px;*/
    /*}*/

    .strengthLv1 {
        background: red;
        height: 6px;
        width: 40px;
        border: 1px solid #ccc;
        padding: 2px;
    }

    .strengthLv2 {
        background: orange;
        height: 6px;
        width: 80px;
        border: 1px solid #ccc;
        padding: 2px;
    }

    .strengthLv3 {
        background: green;
        height: 6px;
        width: 120px;
        border: 1px solid #ccc;
        padding: 2px;
    }


</style>






<div class="layui-col-xs6">
    <label class="layui-form-label require-icon">密码</label>
    <div class="layui-input-block">
        <input type="password" id="password" name="password" autocomplete="off"    class="layui-input" data-rule-required="true" data-rule-maxlength="36" lay-verify="required|password">
        <div class="pass_wrap">
            <em>密码强度：</em>
            <em id="strength"></em>
            <div id="strengthLevel" class="strengthLv0"></div>
        </div>
    </div>
</div>

js页面

// 获取密码ID
var pwd = document.getElementById("password");
var strength = document.getElementById("strength");
// 获取强度id
var strengthLevel = document.getElementById("strengthLevel");
var arr = ["", "低", "中", "高"];

// 注册键盘抬起事件
pwd.onkeyup = function(){

      var ll  = (this.value.length >= 6 || this.value.length ==0) ?getpassword(this.value):1
      strength.innerHTML = arr[ll];
      strengthLevel.className = "strengthLv"+ll;
};

//判断获取密码级别
function getpassword(pwd){
   var lvl = 0;//默认等级是0
   //判断密码中是否有数字、字母、特殊符号

   // 判断数字
   if(/[0-9]/.test(pwd)){
      lvl++;
   }
   // 判断有没有字母
   if(/[a-zA-Z]/.test(pwd)){
      lvl++;
   }
   // 判断有没有特殊符号
   if(/[^0-9a-zA-A_]/.test(pwd)){
      lvl++;
   }
   return lvl; //默认传出是1
}

// 保存按钮事件绑定
$('#btn-save').on('click', function () {
  
(略) ......

      var regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,30}');
      if(!regex.test(params.password)){
         fail:{
            nebula.modal.error("密码必须至少包含数字、大写字母、小写字母、特殊符号任意三种且长度超过6位(不超过30位)")
         }
              return ;
      }

(略) ......
;