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 相关文章推荐
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
简单实现JS计算器功能
Dec 21 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
python 数据的清理行为实例详解
2017/07/12 Python
Python中super函数的用法
2017/11/17 Python
简单了解什么是神经网络
2017/12/23 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
2016年党建工作简报
2015/11/26 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
导游词之唐山景点
2019/12/18 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记