js---操作元素---密码框验证信息

最新推荐文章于 2024-05-23 11:58:34 发布

m4587

最新推荐文章于 2024-05-23 11:58:34 发布

阅读量469

点赞数 4

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m4587/article/details/126536216

版权

密码框验证信息实现以下功能

如果输入正确则提示正确的信息显示绿色，小图标变化
如果输入的不是6~10位密码则提示错误的信息显示红色，小图标变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>密码框验证信息</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			div {
				width: 500px;
				height: 30px;
				margin: 100px auto;
			}

			.ipt {
				width: 200px;
				height: 100%;
				line-height: 30px;
				padding: 5px;
				box-sizing: border-box;
			}

			.message {
				display: inline-block;
				color: #999;
				background: url(img/提示.png) no-repeat left center;
				font-size: 12px;
				padding-left: 24px;
				height: 100%;
				line-height: 30px;
				text-align: center;
			}

			.wrong {
				color: #ee2c13;
				background-image: url(img/关闭圆.png);
			}

			.right {
				color: #41b916;
				background-image: url(img/选中圆.png);
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				//获取元素
				var ipt = document.querySelector('.ipt');
				var msg = document.querySelector('.message');

				ipt.onblur = function() {

					if (ipt.value.length < 6 || ipt.value.length > 10) {
						msg.className = "message wrong";
						msg.innerHTML = "请输入正确的密码"
					} else {
						msg.className = "message right";
						msg.innerHTML = "密码正确"
					}
				}
			}
		</script>

	</head>
	<body>
		<div>
			<input type="password" class="ipt">
			<p class="message">请输入6~10位密码</p>
		</div>
	</body>
</html>