密码输入要求

槿花荣

已于 2022-07-25 20:13:35 修改

阅读量170

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript新手村文章标签： html javascript 前端 html5

于 2022-07-25 20:12:10 首次发布

本文链接：https://blog.csdn.net/m0_63359528/article/details/125982257

JavaScript新手村专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要介绍了使用HTML、CSS和JavaScript实现一个简单的前端密码输入验证。通过设置输入框样式和提示信息，当用户输入的密码长度不符合6~16字符的要求时，会显示错误提示；反之则显示正确提示。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				padding: 0px;
				margin: 0px auto;
			}
			
			.box{
				width: 400px;
				height: 120px;
			}
			
			.ipt{
				position:fixed;
				width: 200px;
				height: 50px;
				position: fixed;
				border-radius: 5px;
				margin: 50px 100px;
				color: black;
				font-size: 18px;
				text-align: center;
				
			}
			
			.dian{
				height: 25px;
				width: 180px;
				text-align: center;
				background-color: aqua;
				border-radius: 20px;
				position: fixed;
				margin: 15px 110px;
			}
			
			.wrong{
				background-color: red;
			}
			
			.correct{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		
		
		<div class="box">
			<input type="password" value="输入" class="ipt"/>
			<p class="dian">请输入6~16字符的密码</p></div>
			<script>
				var ipt = document.querySelector('.ipt');
				var btn = document.querySelector('.dian');
				
				ipt.onblur = function(){
					if(this.value.length<6 || this.value.length>16){
						console.log('错误');
						btn.className = 'dian wrong';
					}else{
						console.log('正确');
						btn.className ='dian correct';
					}
				}
			</script>
		</div>
	</body>
</html>