javascript实现前端input密码输入强度验证


Posted in Javascript onJune 24, 2020

本文实例为大家分享了js实现密码输入强度验证的具体代码,供大家参考,具体内容如下

javascript实现前端input密码输入强度验证

需求:

1.需要对用户输入的密码进行验证,验证的级别分为强中弱,如果输入的密码强度少于6时,则不会验证,只有密码强度在6-20时才会进行验证。

相关的正则

//密码为八位及以上并且字母数字特殊字符三项都包括
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");

2.密码的显示与隐藏,点击小眼可以对密码进行显示或者隐藏。

具体代码

html部分:

<div class="wrapper">
  <div class="input_box">
  <input type="password" name="" placeholder="请输入密码" oninput="passValidate(this)" id="inputPwd" value="">
  <div class="eye_icon"></div>
  </div>
  <p>请至少使用字母、数字、符号两种类型组合的密码,长度为6~20位。</p>
  <ul class="pwdStrength">
   <li class="weak"></li>
   <li class="middle"></li>
   <li class="strong"></li>
   <li class="result"></li>
  </ul>
</div>

css部分:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }

  .wrapper {
   width: 500px;
   height: 200px;
   border: 1px solid #eee;
   margin: 100px auto;
   display: flex;
   align-items: center;
   flex-direction: column;
  }
  .input_box{
   width: 80%;
   display: flex;
   align-items: center;
  }
  .input_box input {
   width: 82%;
   height: 30px;
   border: none;
   outline: none;
   border: 1px solid #D2B48C;
   border-radius: 12px;
   margin: 10px 0px;
   padding-left: 15px;
  }
  .eye_icon{
   width: 20px;
   height: 20px;
   background-image: url('./open_eye.png');
   background-repeat: no-repeat;
   background-position: center content;
   background-size: cover;
   margin-left: 10px;
  }
  .wrapper p {
   width: 80%;
   height: 60px;
   line-height: 26px;
   font-size: 14px;
   color: #339999;
  }

  .pwdStrength {
   width: 80%;
   list-style: none;
   height: 30px;
   display: none;
   flex: 1;
  }

  .weak,
  .middle,
  .strong {
   height: 15px;
   width: 30px;
   border: 1px solid black;
   background: rgb(238, 238, 238);

  }

  .middle {
   border-left: 0;
   border-right: 0;
  }

  .result {
   width: 30px;
   height: 15px;
   font-size: 14px;
   line-height: 14px;
   text-align: center;
   margin-left: 10px;
  }

JS部分:

//密码的可见与隐藏、
  console.log($('#inputPwd'))
  var eyeFlag = false;
  $('.eye_icon').click(function(){
   if(!eyeFlag){
    $(this).css({'background-image': 'url(' + "./close_eye.png" + ')'});
    $('#inputPwd').attr('type','text');
   }else{
    $(this).css({'background-image': 'url(' + "./open_eye.png" + ')'});
    $('#inputPwd').attr('type','password')
   }
   eyeFlag = !eyeFlag;
  })
  //密码强度验证
  function passValidate(e) {
   var pwd = $.trim(e.value);
   if (pwd === '') {
    $('.pwdStrength').css({'display':'none'})
    $('.weak').css({
     'background': 'rgb(238, 238, 238)'
    });
    $('.middle').css({
     'background': 'rgb(238, 238, 238)'
    });
    $('.strong').css({
     'background': 'rgb(238, 238, 238)'
    });
    $('.result').text('')
   } else {
    $('.pwdStrength').css({'display':'flex'})
    //密码为八位及以上并且字母数字特殊字符三项都包括
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test(pwd)) {
    } else if (strongRegex.test(pwd)) {
     $('.strong').css({
      'background': '#33ff33'
     });
     $('.result').text('强')
    } else if (mediumRegex.test(pwd)) {

     $('.middle').css({
      'background': '#FFC125'
     });
     $('.strong').css({
      'background': 'rgb(238, 238, 238)'
     });
     $('.result').text('中')
    } else {

     $('.weak').css({
      'background': '#EE4000'
     });
     $('.middle').css({
      'background': 'rgb(238, 238, 238)'
     });
     $('.strong').css({
      'background': 'rgb(238, 238, 238)'
     });
     $('.result').text('弱')
    }
   }
}

效果

密码强度为弱

javascript实现前端input密码输入强度验证

密码强度为中:

javascript实现前端input密码输入强度验证

密码强度为强

javascript实现前端input密码输入强度验证

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
详谈javascript中的cookie
Jun 03 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 #Javascript
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
JS forEach跳出循环2种实现方法
Jun 24 #Javascript
js判断鼠标移入移出方向的方法
Jun 24 #Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 #Javascript
JS script脚本中async和defer区别详解
Jun 24 #Javascript
You might like
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
基于jquery的商品展示放大镜
2010/08/07 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Seajs源码详解分析
2019/04/02 Javascript
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
基于Python解密仿射密码
2019/10/21 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
大学生如何写自荐信
2014/01/08 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
早会主持词
2014/03/17 职场文书
活动总结报告格式
2014/05/09 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
教师求职自荐信
2015/03/26 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年纪委工作总结
2015/05/13 职场文书
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python