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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
页面只能打开一次Cooike如何实现
Dec 04 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
js实现登录验证码
Dec 22 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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 include,include_once,require,require_once
2008/09/05 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python字符串的全排列算法实例详解
2019/01/07 Python
白色公司:The White Company
2017/10/11 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
新闻编辑自荐信
2013/11/03 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
商场父亲节活动方案
2014/08/27 职场文书
七一建党日演讲稿
2014/09/05 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
民政工作个人总结
2015/02/28 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2016中秋节问候语
2015/11/11 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python