模仿注册页面

最新推荐文章于 2021-10-20 10:38:29 发布

生人勿近�

最新推荐文章于 2021-10-20 10:38:29 发布

阅读量160

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/rskfj/article/details/107225568

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模仿注册页面

效果图片
在这里插入图片描述
代码图片

复制如下`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				margin: 50px 0 0 100px;
				width: 600px;
			}
			.message{
				display: inline-block;
				font-size: 12px;
				color: #ccc;
				background:url(images/mess.png) no-repeat left center;
				padding-left: 20px;
			}
			.right{
				color: green;
				background: url(images/right.png) no-repeat left center;
			}
			.wrong{
				color: red;
				background: url(images/wrong.png) no-repeat left center;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="password" id="pwd">
			<p class="message">请输入6~16位密码</p>
		</div>
	</body>
	<script type="text/javascript">
		var pwd=document.querySelector('#pwd');
		var message=document.querySelector('.message');
		pwd.onblur=function(){
			if(this.value.length>=6 && this.value.length<=16){
				message.className="message right";
				message.innerHTML="您输入的正确";
			}else{
				message.className="message wrong";
				message.innerHTML="您输入的位数不对要求6~16位";
			}
		}
	</script>
</html>