Js简单的表单验证
程序员文章站
2022-05-31 13:55:50
...
先创建一个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>
上一篇： 孕妇秋乏吃它一个秋天都不犯困