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
JavaScript之编码规范 推荐
May 23 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
vue中七牛插件使用的实例代码
2017/07/28 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
pandas值替换方法
2018/07/10 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
浅析Django中关于session的使用
2019/12/30 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
经典大学生求职信范文
2014/01/06 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
食品卫生管理制度
2015/08/06 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python