js表单验证

时松

于 2020-07-27 11:01:25 发布

阅读量104

点赞数

分类专栏：基础文章标签： js

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/107607081

版权

基础专栏收录该内容

79 篇文章

订阅专栏

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