我们设定密码强度等级为10,制作一张图片表示每个等级状态,给密码框绑定keyup事件,通过keyup事件获取密码值,然后使用正则进行判断密码强度等级,然后变换相应的图片。
使用很简单。
-
$('#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
载入JS和CSS:
-
<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>
分享到:
相关推荐
Jquery插件之密码强度检测:passwordStrength
jQuery密码强度检测代码
本文实例讲述了jQuery密码强度检测插件passwordStrength用法。分享给大家供大家参考,具体如下: 这里赋予密码强度为10个等级(实例中的progressImg1.png是一张包含十个状态的图片),然后通过设置每 个状态的CSS...
jquery密码强度检测_密码强度验证_密码强度正则表达式代码_动画效果(动画效果不用jquery)
jquery 密码强度检测 很简单的例子 不过里面含有jar包什么的 是一个完整的项目 下载后可直接导入myeclipse 运行
jQuery+passwordStrength密码强度检测
jQuery密码强度检测代码基于jquery.1.7.2.min.js插件制作,密码小于六位的时候,密码强度图片都为灰色;密码为八位及以上并且字母数字特殊字符三项都包括,强度最强;密码为七位及以上并且字母、数字、特殊字符三项中...
jquery密码强度检测_密码强度验证_密码强度正则表达式代码
jquery密码强度效果,正则验证密码强度
jQuery密码强度检测高级版代码是一款支持各种不同提醒的jQuery密码强度验证代码,根据密码强度等级页面背景变色功能,效果非常赞。
密码强度检测,一款非常实用的密码强度检测jQuery插件,兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码
jquery 密码强度 验证,简洁明了,密码分别为6、7、8位时
passwordStrength 基于jquery的密码强度检测.zip
基于jQuery的密码强度检测插件,自动检测您输入的密码的强度,并给出建议。
jQuery实现带密码强度检测的输入框设计效果
一个漂亮易用的jQuery密码强度验证插件,随着密码强度的改变而改变密码输入的颜色
jQuery 验证密码强弱的小例子,在输入框中填入用户名和密码,如果密码的位数过少或密码比较单一,则会适时出现密码强弱的提示,如果密码合格则出现“Good”。这个小功能很实用,也是提升用户体验的一种方法。
整理jquery密码强度检测高级版整套源码下载