密码框验证信息

最新推荐文章于 2023-06-04 15:31:08 发布

积沙成塔——

最新推荐文章于 2023-06-04 15:31:08 发布

阅读量609

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_45308912/article/details/121257955

版权

JavaScript基础专栏收录该内容

78 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果展示：

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="fontss2/iconfont.css" />
		<style>
			.orginal {
				font-size: 13px;
				color: deepskyblue;
			}
			.wrong {
				font-size: 13px;
				color: red;		
			}
			.right {
				font-size: 13px;
				color: green;
			}
		</style>
	</head>
	<body>
		<p>
			<input type="text"><span class="orginal icon-wenhao iconfont">请输入6-16位密码</span>
		</p>
		<script>
			//获取元素对象
			var input = document.querySelector('input');
			var span = document.querySelector('span');

			// 注册事件 失去焦点事件
			input.onblur = function() {
				if (input.value.length > 0 && input.value.length < 6 || input.value.length > 16) {
					span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang wrong';
					span.innerHTML= '输入错误请输入6-16位密码';
				}else if(input.value.length >=6 && input.value.length <=16) {
					span.className = 'iconfont  icon-yiyanzheng  right';
					span.innerHTML = '输入正确';
				}else {
					span.className = 'orginal icon-wenhao iconfont';
					span.innerHTML = '请输入6-16位密码';
				}
			}
		</script>
	</body>
</html>