jQuery密码强度检测插件passwordStrength用法实例分析


Posted in Javascript onOctober 30, 2015

本文实例讲述了jQuery密码强度检测插件passwordStrength用法。分享给大家供大家参考,具体如下:

这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度。其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究。

运行效果截图如下:

jQuery密码强度检测插件passwordStrength用法实例分析

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery密码强度插件passwordStrength实例演示</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script src="jquery.passwordStrength.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  var $pwd = $('input[name="password"]');
  $pwd.passwordStrength();
  $(".Generate_password").click(function(){
  //产生随机八位密码
  var pwd = $.passwordStrength.getRandomPassword(8);
  //将随机密码写入密码框,并触发验证
  $pwd.val(pwd).trigger("keyup");
  return false;
  })
});
</script>
<style type="text/css">
body{font-size:12px;}
.clearfix:after{
content:"."; display:block; height:0; clear:both;
visibility:hidden;
}
*html .clearfix{
 height:1%;
}
*+html .clearfix{
 height:1%;
}
.l{float:left;}
.form_item{margin-bottom:6px;}
.form_item label{width:100px;text-align:right;margin-right:4px;display:block;float:left;padding-top:2px;}
.form_item .text{height:14px;padding:2px;width:132px;border:1px solid #999;}
.form_item div a{margin-left:6px;}
#passwordStrengthDiv{margin-top:6px;}
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
</style>
</head>
<body>
<script type="text/javascript"> 
if(document.getElementById('GoogleAD')!=null){
document.getElementById('GoogleAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('GoogleADCode').innerHTML + '</div>';
}
</script>
<div class="form_item clearfix">
<label>密  码:</label>
<div class="l">
  <div><input name="password" type="text" class="text" maxlength="16"/><a href="" class="Generate_password">产生随机密码</a></div>
  <div id="passwordStrengthDiv" class="is0"></div> 
 </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 #Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 #Javascript
自己动手写的javascript前端等待控件
Oct 30 #Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 #Javascript
JavaScript获取function所有参数名的方法
Oct 30 #Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 #Javascript
jQuery实现切换页面过渡动画效果
Oct 29 #Javascript
You might like
laravel异步监控定时调度器实例详解
2019/06/21 PHP
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python模块之StringIO使用示例
2015/04/08 Python
九步学会Python装饰器
2015/05/09 Python
Python中的枚举类型示例介绍
2019/01/09 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
python3.7 的新特性详解
2019/07/25 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
C# .NET面试题
2015/11/28 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
关于迟到的检讨书
2014/01/26 职场文书
保护环境的建议书
2014/03/12 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
高一地理教学工作总结
2015/08/12 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Pygame Rect区域位置的使用(图文)
2021/11/17 Python