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 Konami Code 实现代码
Jul 29 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue实现菜单切换功能
May 08 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php 启动报错如何解决
2014/01/17 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
Js 中debug方式
2010/02/07 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
Python turtle库的画笔控制说明
2020/06/28 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
外包公司软件测试工程师
2014/11/01 面试题
列车长先进事迹材料
2014/01/25 职场文书
社会实践活动总结报告
2014/04/29 职场文书
美化环境标语
2014/06/20 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
小学运动会通讯稿
2015/07/18 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python