- jQuery密码强度插件passwordStrength实例演示,这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度。其中,实现此功能的重点和难点就是通过正则进行判断等级,有兴趣的朋友可以慢慢探究。
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script src="/jscss/demoimg/201206/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(/jscss/demoimg/201206/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插件之密码强度检测:passwordStrength
一个漂亮易用的jQuery密码强度验证插件,随着密码强度的改变而改变密码输入的颜色
本文实例讲述了jQuery密码强度检测插件passwordStrength用法。分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS...
jquery密码强度效果,正则验证密码强度
jQuery密码强度检测代码
jquery 检测密码强度插件 最新的插件
很早以前,我们为大家分享过一款基于jQuery...今天我们要再分享一款基于jQuery的密码强度检查插件,它有4种漂亮的强度提示外观,整体上看非常清新简洁而又大气,然而这款密码强度插件可以非常方便地集成到你的表单中。
jQuery+passwordStrength密码强度检测
jquery 密码强度 验证,简洁明了,密码分别为6、7、8位时
jquery密码强度检测_密码强度验证_密码强度正则表达式代码_动画效果(动画效果不用jquery)
基于jQuery的密码强度检测插件,自动检测您输入的密码的强度,并给出建议。
jQuery制作密码强度验证插件 演示地址:http://www.xwcms.net/js/bddm/90634.html
jquery会员注册表单验证实例演示
jquery 倒计时插件 jCountr 实例 jquery 倒计时插件 jCountr 实例
jqueryUI resizeable插件与实例
jquery会员注册表单验证实例演示
jQuery密码强度检测代码基于jquery.1.7.2.min.js插件制作,密码小于六位的时候,密码强度图片都为灰色;密码为八位及以上并且字母数字特殊字符三项都包括,强度最强;密码为七位及以上并且字母、数字、特殊字符三项中...
jquery 密码强度检测 很简单的例子 不过里面含有jar包什么的 是一个完整的项目 下载后可直接导入myeclipse 运行
jQuery密码强度检测高级版代码是一款支持各种不同提醒的jQuery密码强度验证代码,根据密码强度等级页面背景变色功能,效果非常赞。