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实现控制内容的向上向下滚动效果
Jun 26 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
Javascript之Math对象详解
Jun 07 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
OpenLayers3实现测量功能
Sep 25 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中转义mysql语句的实现代码
2011/06/24 PHP
jQuery load方法用法集锦
2011/12/06 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python利用sklearn包编写决策树源代码
2017/12/21 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python 拼接文件路径的方法
2018/10/23 Python
详解python中sort排序使用
2019/03/23 Python
python中with用法讲解
2020/02/07 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
学生感冒英文请假条
2014/02/04 职场文书
导师工作推荐信范文
2014/05/17 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
中秋晚会活动方案
2014/08/31 职场文书
政风行风整改方案
2014/10/25 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Python连续赋值需要注意的一些问题
2021/06/03 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android