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 相关文章推荐
jquery键盘事件使用介绍
Nov 01 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 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
把77A收信机改造成收音机
2021/03/02 无线电
PHP闭包(Closure)使用详解
2013/05/02 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
php验证码实现代码(3种)
2015/09/07 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
python实现端口转发器的方法
2015/03/13 Python
python监控文件或目录变化
2016/06/07 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python取均匀不重复的随机数方式
2019/11/27 Python
如何理解python面向对象编程
2020/06/01 Python
如何用Python徒手写线性回归
2021/01/25 Python
植物选择:Botanic Choice
2017/02/15 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
.NET概念性的面试题
2012/02/29 面试题
实习生自我鉴定
2013/12/12 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
详解Python内置模块Collections
2022/03/22 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers