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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • passwordStrength 基于jquery的密码强度检测代码使用介绍

    查看示例:DEMO  打包下载 使用很简单. 复制代码 代码如下: $('#pass').passwordStrength(); XHTML 复制代码 代码如下: <p><label>请输入密码:</label> <input type="password" id="pass" class="input" /></p> <div id="passwordStrengthD

  • 基于JQuery的密码强度验证代码

    基于JQuery的密码强度验证代码

       因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f

  • jquery判断密码强度的验证代码

    jquery判断密码强度的验证代码

    本文实例讲述了jquery判断密码强度的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.

  • jQuery实现注册会员时密码强度提示信息功能示例

    jQuery实现注册会员时密码强度提示信息功能示例

    本文实例讲述了jQuery实现注册会员时密码强度提示信息功能.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <p><span>设置密码:</span><input type="password" id="external_regist_password1" name="password1" value="" /><b>*</b>

  • jQuery实用密码强度检测

    jQuery实用密码强度检测

    JQ实用密码强度检测 通过正则来判断验证密码强弱并通过替换提示图片进行显示. 素材图片,请自取: html源码: <table style="width:320px;margin:40px auto;"> <tr> <th>密码</th> <td><span class="tbl-txt"><input id="pass" class="input-style

  • jQuery插件passwordStrength密码强度指标详解

    jQuery插件passwordStrength密码强度指标详解

    passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>passwordStrength</title> <link href="css/style.css" rel=

  • jQuery判断密码强度实现思路及代码

    jQuery判断密码强度实现思路及代码

    复制代码 代码如下: <head> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height

  • jquery密码强度校验

    jquery密码强度校验

    本文实例讲述了jquery密码强度校验的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: 关键代码: <script> //下面的正则表达式建议各位收藏哦,项目上有可能会用得着 $(function(){ $('#pass').blur(function(e) { // alert('---------'); //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=

  • jQuery实现提示密码强度的代码

    如何实现色条随输入密码长度变化效果: 在很多网站注册页面都有这样的功能,当用户输入密码的时候,下面会出现一个色条,色条的长度会跟随输入密码的长度变化,并且色条的颜色也会根据输入密码长度的不同有所改变,一般是用来提示密码强度.下面就简单介绍一下使用jQuery如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</tit

  • jQuery密码强度验证控件使用详解

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

随机推荐