使用jQuery实现密码强度校验实时显示

最新推荐文章于 2023-06-07 08:35:55 发布

Zijeak

最新推荐文章于 2023-06-07 08:35:55 发布

阅读量457

点赞数

分类专栏：前端文章标签： jquery js web

本文链接：https://blog.csdn.net/qq_18404993/article/details/105218588

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>密码强度校验</title>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		//jQuery内容
		$(document).ready(function(){
			$('#input').blur(function(event){
				var password = $('#input').val();
				function getValue(password){
					var value = 0;
					if(password.length>=8){
						value = 1;
					}
					for(var i=0;i<password.length;i++){
						var current = password.charCodeAt(i);
						//大写或小写字母
						if(((current>=65&&current<=90)||(current>=97&&current<=122))&&password.length>=8){
							value = 2;
						}
						//特殊字符
						if(((current>=33&&current<=47)||(current>=58&&current<=64)||(current>=91&&current<=96)||(current>=123&&current<=126))&&password.length>=8){
							value = 3;
							break;
						}
					}
					return value;
				}
				var value = getValue(password);
				if(value==0){
					$('#show').text('低强度');
					$('#show').css({'color':'red'});
				}else if(value==1){
					$('#show').text('中低强度');
					$('#show').css({'color':'orange'});
				}else if(value==2){
					$('#show').text('中强度');
					$('#show').css({'color':'blue'});
				}else if(value==3){
					$('#show').text('高强度');
					$('#show').css({'color':'green'});
				}
			});
		});
	</script>
</head>
<body>
<input type="password" id="input">
<span id="show"></span>
</body>
</html>

在这里插入图片描述

Zijeak

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery实现密码强度校验实时显示

<!DOCTYPE html><html><head> <title>密码强度校验</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascri...
复制链接

扫一扫

专栏目录