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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
基于JavaScript实现省市联动效果
Jun 22 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
vue组件间通信解析
2017/03/01 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
鱼油专家:Omegavia
2016/10/10 全球购物
雷人标语集锦
2014/06/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
2016年教师新年寄语
2015/08/18 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers