jQuery实用密码强度检测


Posted in Javascript onMarch 02, 2017

JQ实用密码强度检测

通过正则来判断验证密码强弱并通过替换提示图片进行显示。

素材图片,请自取:

jQuery实用密码强度检测jQuery实用密码强度检测

html源码:

<table style="width:320px;margin:40px auto;"> 
 <tr> 
  <th>密码</th> 
  <td><span class="tbl-txt"><input id="pass" class="input-style" size="30" maxlength="30" name="pass" type="text" /></span></td> 
 </tr> 
 <tr>  
  <th></th>   
  <td id="level" class="pw-strength">    
   <div class="pw-bar"></div> 
   <div class="pw-bar-on"></div> 
   <div class="pw-txt"> 
   <span>弱</span> 
   <span>中</span> 
   <span>强</span> 
   </div> 
  </td>  
 </tr> 
</table>

css源码:

.tbl-txt{font-size:14px;} 
  .tbl-txt input{padding:0 5px; height:22px; line-height:22px; margin-bottom:6px;} 
  .pw-strength {clear: both;position: relative;top: 8px;width: 180px;} 
  .pw-bar{background: url(images/pwd-1.png) no-repeat; position:relative; top:1px;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;}

javascript源码:

$(function(){ 
 $('#pass').keyup(function () { 
  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($(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; 
 }); 
})

根据上述正则最终效果图如下:

jQuery实用密码强度检测

jQuery实用密码强度检测

jQuery实用密码强度检测

jQuery实用密码强度检测

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

Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
通过npm引用的vue组件使用详解
Mar 02 #Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 #Javascript
vue-dialog的弹出层组件
May 25 #Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 #Javascript
基于Bootstrap的网页设计实例
Mar 01 #Javascript
JS中的作用域链
Mar 01 #Javascript
javascript html5轻松实现拖动功能
Mar 01 #Javascript
You might like
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python Flask基础教程示例代码
2018/02/07 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python3爬虫学习入门教程
2018/12/11 Python
pandas 时间格式转换的实现
2019/07/06 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
python编写简单端口扫描器
2019/09/04 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
个人维稳承诺书
2015/05/04 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Python中第三方库Faker的使用详解
2022/04/02 Python
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python