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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
ionic 自定义弹框效果
Jun 27 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
angular 服务随记小结
May 06 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 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实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JS实现HTML表格排序功能
2016/08/05 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
初探nodeJS
2017/01/24 NodeJs
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python教程之全局变量用法
2016/06/27 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python类装饰器实现方法详解
2018/12/21 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
python爬虫 正则表达式解析
2019/09/28 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
优秀家长事迹材料
2014/05/17 职场文书
品牌推广策划方案
2014/05/28 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
Django实现聊天机器人
2021/05/31 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL