js案例:密码框验证信息

m0_63400611

已于 2022-05-16 18:24:50 修改

阅读量84

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2021-11-23 19:15:10 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/121500363

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		.register {
			width: 600px;
			margin: 100px auto;
		}
		.message {
			display: inline-block;
			font-size: 12px;
			color: #999;
			padding-left: 20px;
		}
		.wrong {
			color: red;
		}
		.right {
			color: green;
		}
	</style>
</head>

<body>
	<div class="register">
		<input class="ipt" type="password" id="ipt">
		<p class="message" id="message">请输入8-16位密码</p>
	</div>
	
	<script>
		var ipt = document.getElementById('ipt');
		var message = document.getElementById('message');
		
		ipt.onblur = function(){
			if(this.value.length < 8 || this.value.length > 16){
				message.className = 'message wrong';
				message.innerHTML = '你输入的位数不达要求';
			}else {
				message.className = 'message right';
				message.innerHTML = '啊对对对'
			}
		}
	</script>
</body>
</html>