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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript里四舍五入函数round用法实例
Apr 06 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
折叠菜单及选择器的运用
Feb 03 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
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Python之父谈Python的未来形式
2016/07/01 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
【python】matplotlib动态显示详解
2019/04/11 Python
python中的colorlog库使用详解
2019/07/05 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
Python定时器线程池原理详解
2020/02/26 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
考研复习计划
2015/01/19 职场文书
观后感格式
2015/06/19 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python