Js简单的表单验证

最新推荐文章于 2022-04-19 14:04:56 发布

孤.独

最新推荐文章于 2022-04-19 14:04:56 发布

阅读量166

点赞数

分类专栏： JS 文章标签： css html js

本文链接：https://blog.csdn.net/weixin_44052919/article/details/108420168

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先创建一个JS 文件 Common.js

// 外部js文件
function $(id) {
    return document.getElementById(id);
}
function  $ByName(name) {
    return document.getElementsByName(name);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="common.js"></script>
		<script type="text/javascript">
			function checkuser() {
				var username = $("username").value;
				if (username.length < 6) {
					$("s1").style.display = "block";
				} else {
					$("s1").style.display = "none";
				}
			}

			function checkpsw() {
				var psw = $("psw").value;
				if (psw.length < 8) {
					$("s2").style.display = "block";

				} else {
					$("s2").style.display = "none";
				}
			}

			function checkpsw1() {
				var psw = $("psw").value;
				var psw1 = $("psw1").value;

				if (psw != psw1) {
					$("s3").style.display = "block";

				} else {
					$("s3").style.display = "none";
				}
			}

			function chAll() {
				checkuser();
				checkpsw();
				checkpsw1();
			}
		</script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body {


				background: url(img/blue.jpg) no-repeat;
				background-size: cover;
			}

			.pdiv {
				width: 100%;
				height: 20px;
			}

			#d1 {
				width: 450px;
				height: 350px;
				margin: auto;
				background-color: #E1E1E1;
				;
				border-radius: 20px;
				box-shadow: 20px 20px 20px rgba(100, 50, 150, .5);
				margin-top: 10%;
			}

			#tit {
				width: 100%;
				height: 60px;
				border-radius: 20px 20px 0px 0px;
				text-align: center;
				line-height: 60px;
				background-color: cornflowerblue;

			}

			#d2 {
				margin: auto;
				width: 90%;
				height: 70%;
				/* background-color: #0000FF; */
				text-align: center;
			}

			.in {
				height: 40px;
				width: 60%;
				border: #D1D1D7 solid 1px;
				border-radius: 5px;
			}

			.sent {
				width: 60%;
				height: 40px;
				border-radius: 20px;
				color: white;
				font-size: 1.1em;
				color: white;
				background-color: #0099FF;
				border: white 2px solid;
			}

			.s {
				display: none;
				font-size: 0.8em;
				color: red;
			}
		</style>
	</head>
	<body style="background-image: url(img/BLUE%20(417).JPG);">

		<div id="d1">
			<div id="tit">
				<h2 style="color: white;">登录</h2>
			</div>
			<div class="pdiv"></div>
			<div id="d2">
				<form action="" method="">
					<div class="pdiv"></div>

					<input type="text" name="username" class="in" id="username" placeholder="请输入账号" />
					<div class="pdiv"><span class="s" id="s1">密码的长度应大于6位</span></div>
					<input type="password" name="psw" class="in" id="psw" placeholder="请输入密码" />
					<div class="pdiv"><span class="s" id="s2">密码的长度应大于8位</span></div>
					<input type="password" name="psw" class="in" id="psw1" placeholder="请再次输入密码" />
					<div class="pdiv"><span class="s" id="s3">两次密码不一致</span></div>
					<input type="button" name="logon" class="sent" value="登录" onclick="chAll()" />
				</form>
			</div>




		</div>

	</body>
</html>