jQuery实现密码强度的智能验证插件_jQuery如何判断密码强度
2014-09-28 12:36:42  By: dwtedx

• dwtedx
• JQuery教程
• 0
• 3021
• 0

jquery实现密码强度的智能判断特效是一款非常实用的jquery特效

基本上每个有会员模块的网站都可用上、可以提示会员注册时输入的密码强度

其实现主要用到了keyup事件、随时监听密码的强度、话不多说

先看一下主要是jQuery代码

function checkPassword(pwdinput) {
	var maths, smalls, bigs, corps, cat, num;
	var str = $(pwdinput).val()
	var len = str.length;
	var cat = /.{16}/g
	if (len == 0) return 1;
	if (len > 16) { $(pwdinput).val(str.match(cat)[0]); }
	cat = /.*[u4e00-u9fa5]+.*$/
	if (cat.test(str)) {
		return -1;
	}
	cat = /d/;
	var maths = cat.test(str);
	cat = /[a-z]/;
	var smalls = cat.test(str);
	cat = /[A-Z]/;
	var bigs = cat.test(str);
	var corps = corpses(pwdinput);
	var num = maths + smalls + bigs + corps;
 
	if (len < 6) { return 1; }
 
	if (len >= 6 && len <= 8) {
		if (num == 1) return 1;
		if (num == 2 || num == 3) return 2;
		if (num == 4) return 3;
	}
 
	if (len > 8 && len <= 11) {
		if (num == 1) return 2;
		if (num == 2) return 3;
		if (num == 3) return 4;
		if (num == 4) return 5;
	}
 
	if (len > 11) {
		if (num == 1) return 3;
		if (num == 2) return 4;
		if (num > 2) return 5;
	}
}
 
function corpses(pwdinput) {
	var cat = /./g
	var str = $(pwdinput).val();
	var sz = str.match(cat)
	for (var i = 0; i < sz.length; i++) {
		cat = /d/;
		maths_01 = cat.test(sz[i]);
		cat = /[a-z]/;
		smalls_01 = cat.test(sz[i]);
		cat = /[A-Z]/;
		bigs_01 = cat.test(sz[i]);
		if (!maths_01 && !smalls_01 && !bigs_01) { return true; }
	}
	return false;
}

下面我再把HTML的代码贴出来

<div class="ywz_zhucexiaobo">
  <div class="ywz_zhuce_youjian"> 设置密码：</div>
  <div class="ywz_zhuce_xiaoxiaobao">
	<div class="ywz_zhuce_kuangzi">
	  <input name="tbPassword" type="password" id="tbPassword" 
		class="ywz_zhuce_kuangwenzi1" />
	</div>
	<div class="ywz_zhuce_huixian" id=´pwdLevel_1´> </div>
	<div class="ywz_zhuce_huixian" id=´pwdLevel_2´> </div>
	<div class="ywz_zhuce_huixian" id=´pwdLevel_3´> </div>
	<div class="ywz_zhuce_hongxianwenzi"> 弱</div>
	<div class="ywz_zhuce_hongxianwenzi"> 中</div>
	<div class="ywz_zhuce_hongxianwenzi"> 强</div>
  </div>
  <div class="ywz_zhuce_yongyu1"> 
	<span id="pwd_tip" style="color: #898989">
	<font style="color: #F00">*</font> 6-16位，由字母（区分大小写）、
	数字、符号组成</span> 
	<span id="pwd_err" style="color: #f00; display:none;">6-16位，
	由字母（区分大小写）、数字、符号组成</span> </div>
</div>

最后给大家献上源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1i3qXBff 密码: puki

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛