这是一款利用jquery的passwordStrength插件来实现用户输入密码的强度进行检测，有需要的朋友可以参考一下。
简的很
| 代码如下 | 复制代码 |
$('#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> |
