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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
js获取域名的方法
Jan 27 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
vue-cli的工程模板与构建工具详解
Sep 27 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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 echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php bootstrap实现简单登录
2016/03/08 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
AngularJS自定义控件实例详解
2016/12/13 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
python网络编程之数据传输UDP实例分析
2015/05/20 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
毕业生就业意向书
2014/04/01 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
欢迎新生标语2015
2015/07/16 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android