javaScript 动态生成密码强度

最新推荐文章于 2025-05-22 12:47:44 发布

yusimiao

最新推荐文章于 2025-05-22 12:47:44 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jsp web前端 javascript 文章标签： js 密码强度

本文链接：https://blog.youkuaiyun.com/yusimiao/article/details/26610767

web前端同时被 3 个专栏收录

12 篇文章

订阅专栏

jsp

9 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍了如何使用JavaScript动态评估并显示密码强度。在许多Web注册表单中，当用户设置密码时，系统会实时显示密码强度等级。通过一个简单的HTML输入元素和相应的JavaScript算法，可以实现这一功能，为用户提供更好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在在很多web网站注册用户信息时，在填写密码元素的时候更多页面会动态提示我们当前输入的密码强度【'低'、'中'、'高'】；

接下来我们来模拟这种形式：

1：密码强度算法

/*
 * |检测密码强度
 * |密码中包含字母强度值加一
 * |密码中包含数字强度加一
 * |密码中包含其他字符强度值加一
 * |密码长度小于5，强度值为0
 * |强度值大于三，则为三
 */

function checkPwdStrong(pwd){
	var lv = 0;
    if(pwd.match(/[a-z]/g)){lv++;}
    if(pwd.match(/[0-9]/g)){lv++;}
    if(pwd.match(/(.[^a-z0-9])/g)){lv++;}
    if(pwd.length < 5){lv=0;}
    if(lv > 3){lv=3;}
}

下面来看一个HTML的表单元素input吧：

<input type="password" id="passwordOne" class="input228_26_blue_jr" tabindex="2" name="userVo.userPwd"/>
<div class="pwdstr02_jr">
	                            	<div class="pwdstr01_jr"></div>
                                </div>
                                <div class="pwdstr001_jr"></div>

写完表单稍稍加上一些样式：

<style type="text/css">
    #pwdstr01_jr{height:6px;width:81px;border:1px solid #ccc;padding:2px;}
</style>

我们应用Jquery来动态判断密码强度

$(document).ready(function() {
	//密码强度判断
	$("#passwordOne").keyup(function() {
		var S_level = checkPwdStrong($(this).val());
		switch (S_level) {
			case 0:
				$(".pwdstr01_jr").css("background-color", "#33CC00").css("width", "0px");
				$(".pwdstr001_jr").html("");
				break;
			case 1:
				$(".pwdstr01_jr").css("background-color", "#95c62e").css("width", "27px");
				$(".pwdstr001_jr").html("弱");
				
				break;
			case 2:
				$(".pwdstr01_jr").css("background-color", "#FF9900").css("width", "54px");
				$(".pwdstr001_jr").html("中");
				break;
			case 3:
				$(".pwdstr01_jr").css("background-color", "#33CC00").css("width", "81px");
				$(".pwdstr001_jr").html("强");
				break;
			default:
				$(".pwdstr01_jr").css("background-color", "#95c62e").css("width", "0px");
				$(".pwdstr001_jr").html("弱");
		}


	});
})

结束任务