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

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-passwordStrength-plugs-codes/

具体代码如下:

<!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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 插件
, 检测
, 密码强度
passwordStrength
password strength、passwordstrength.js、passwordstrength下载、passwordcallback用法、password changer用法,以便于您获取更多的相关知识。

时间: 2024-10-18 17:18:17

jQuery密码强度检测插件passwordStrength用法实例分析_jquery的相关文章

jquery动态导航插件dynamicNav用法实例分析_jquery

本文实例讲述了jquery动态导航插件dynamicNav用法.分享给大家供大家参考.具体如下: 这是一款自己写的jquery动态导航插件-dynamicNav,具体思路是: 第一.给所有的li里插入一个span标签,且包含li里面的a标签 第二.复制一份a标签,插入到span里,现在span里有两个a标签 第三.根据传入的参数判断是垂直切换还是水平的,如果是垂直的,将span的宽度改为一个a标签的宽度,这时两个a标签就垂直排列了,这里一定要将li的overflow:hidden;否则会看到2个

jQuery网页选项卡插件rTabs用法实例分析_jquery

本文实例讲述了jQuery网页选项卡插件rTabs用法.分享给大家供大家参考.具体如下: 这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行.无动画效果.Hover事件:第二种:自动运行.向上滚动.支持Hover事件的TAB选项卡菜单:第三种:自动运行.渐入淡出.支持Hover事件的选项卡:第四种:自动运行.向左滚动.点击事件的网页选项卡,选一个你喜欢的放在你的网站吧. 先来看看运行效果截图: 在线演示地址如下: http://demo.

基于jquery 密码强度检测插件

简的很  代码如下 复制代码 $('#pass').passwordStrength(); xhtml  代码如下 复制代码 <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthDiv" class=&quo

Jquery日期选择datepicker插件用法实例分析_jquery

本文实例讲述了Jquery日期选择datepicker插件用法.分享给大家供大家参考.具体如下: 1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigTe

jquery siblings获取同辈元素用法实例分析_jquery

本文实例讲述了jquery siblings获取同辈元素用法.分享给大家供大家参考,具体如下: jquery siblings 用于获得匹配集合中每个元素的同胞. 语法: .siblings(selector) 注:可以通过后面的可选参数选择器(selector)进行进一步筛选. 示例: 找到每个div的所有同辈元素. <p>Hello</p> <div> <span>www.jb51.net</span> </div> <p&

jQuery中noConflict()用法实例分析_jquery

本文实例讲述了jQuery中noConflict()用法.分享给大家供大家参考.具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突.在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例如,在要用到$("div p")的地方,就必须换成jQuery(&

jQuery Dialog对话框事件用法实例分析_jquery

本文实例讲述了jQuery Dialog对话框事件用法.分享给大家供大家参考,具体如下: Dialog对话框事件 对话框应用场景 对话框是最常用.最实用的功能. 1) 静态提示类对话框,对话框的内容是固定的 2) 动态提示类对话框,对话框内容是根据事件源变化的 3) 遮罩类对话框,对话框弹出时背景变灰并且不可选 使用jQuery UI的Dialog 组件可以轻松实现上面三种效果 Dialog组件的主要特点是可以拖动(Draggable),可以改变大小(Resizable). Dialog对话框的

JQuery中Text方法用法实例分析_jquery

本文实例讲述了JQuery中Text方法用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

jQuery中的siblings用法实例分析_jquery

本文实例讲述了jQuery中的siblings用法.分享给大家供大家参考,具体如下: 所谓siblings,英文翻译就是兄弟节点.那么故名思意,就是拿到某元素的兄弟节点(不包括自己). <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <ul> &