基于jquery 密码强度检测插件

简的很

 代码如下 复制代码

$('#pass').passwordStrength();

xhtml

 代码如下 复制代码

<p><label>请输入密码：</label>
<input type="password" id="pass" class="input" /></p>
<div id="passwordStrengthDiv" class="is0"></div> 
<p><label>确认密码：</label>
<input type="password" id="repass" class="input" /></p>

注意：id#passwordStrengthDiv的DIV是用来加载强度图片的，你也可以自定义ID，但调用时就要给参数赋值：

targetDiv : '#ID' //自定义加载图片的ID

 代码如下 复制代码

<link rel="stylesheet" type="text/css" href="style/main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
    $('#pass').passwordStrength();
});
</script>

完整实例

 代码如下 复制代码

<style type=text/css>
.demo{width:400px; height:120px; margin:100px auto; padding:40px 120px; color:#424242; background:#fff}
.input{width:138px;height:20px; line-height:20px; border:1px solid #d3d3d3; font-size:14px; }
p label{width:100px; line-height:26px; text-align:right; display:block; float:left}
#passwordStrengthDiv{height:7px; margin:6px 0 8px 100px}
</style>
<script type="text/javascript" src="../Script/jquery.js"></script>
<script type="text/javascript" src="./Script/jquery.passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
 $('#pass').passwordStrength();
});
</script>
</head>
<body>

<div id=main>
   <div class="demo">
    <p>
      <label>请输入密码：</label>
      <input type="password" id="pass" class="input">
    </p>
    <div id="passwordStrengthDiv" class="is0"></div>
    <p>
      <label>确认密码：</label>
      <input type="password" id="repass" class="input">
    </p>
  </div>
</div>
时间： 2024-10-25 04:23:22

基于jquery 密码强度检测插件的相关文章

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

本文实例讲述了jQuery密码强度检测插件passwordStrength用法.分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度.其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-passwordStrength

js密码强度检测_javascript技巧

本文实例讲解了js密码强度检测的实现代码,分享给大家供大家参考,具体内容如下 运行效果图: 这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入. 实现代码: <html> <head> <title>JS判断密码强度</title> <script language=javascript> //判断输入密码的类型 function Ch

网页密码强度检测实例代码

仿MSN密码强度检测 以下js文件代码:var kNoCanonicalCounterpart = 0; var kCapitalLetter = 0; var kSmallLetter = 1; var kDigit = 2; var kPunctuation = 3; var kAlpha =  4; var kCanonicalizeLettersOnly = true; var kCananicalizeEverything = false; var gDebugOutput = nul

JavaScript密码强度检测源代码

javascript|源代码 1.Body代码部分<body> <h4>密码强度检测</h4><table width="100%"  border="0" cellspacing="1" cellpadding="0">  <tr>    <td width="100" align="right">强度显示:<

javascripit实现密码强度检测代码分享

 这篇文章主要介绍了javascripit实现密码强度检测,大家参考使用吧  代码如下: <!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">  

基于jQuery的消息提示插件之旅 DivAlert(三)_jquery

本版本遵循了2.0的写法,此处通过extend方法封装了需要设置的各个选项,比起2.0版本的代码要精简了一些. 2.0版本 复制代码 代码如下: //设置插件基本信息 var options = o || {}; options.width = o.width || 300; //提示框宽度若小于104px则自动重置为200px if (options.height > 104) { options.height = o.height; } else { options.height = 200

密码强度检测效果实现原理与代码_javascript技巧

复制代码 代码如下: <html> <head> <title>密码强度检测效果</title> <script type="text/javascript"> function chkpwd(obj){ var t=obj.value; var id=getResult(t); //定义对应的消息提示 var msg=new Array(4); msg[0]="密码过短."; msg[1]="密

jquery密码强度校验_jquery

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

javascripit实现密码强度检测代码分享_javascript技巧

复制代码 代码如下: <!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"> <head>    <meta http-equiv=&