115 lines
3.2 KiB
HTML
115 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
form {
|
|
width: 300px;
|
|
margin-left: 100px;
|
|
margin-top: 100px;
|
|
}
|
|
|
|
legend {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"] {
|
|
height: 30px;
|
|
}
|
|
|
|
.form-box {
|
|
margin: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-box label {
|
|
display: inline-block;
|
|
width: 70px;
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
.form-box button,
|
|
input[type="reset"] {
|
|
width: 80px;
|
|
height: 40px;
|
|
border: none;
|
|
}
|
|
|
|
.form-box button {
|
|
background-color: #007bff;
|
|
color: aliceblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<form id="userForm" action="https://www.baidu.com" method="POST" autocomplete="off">
|
|
<fieldset>
|
|
<legend align="center">用户登录</legend>
|
|
<div class="form-box">
|
|
<label for="un">用户名：</label>
|
|
<input type="text" class="userName" id="un" name="userName">
|
|
</div>
|
|
<div class="form-box">
|
|
<label for="password">密 码：</label>
|
|
<input type="password" class="psw" id="password">
|
|
</div>
|
|
<div class="form-box">
|
|
<button type="submit">登录</button>
|
|
<input type="reset" value="重置"></input>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
<script>
|
|
const userForm = document.getElementById("userForm");
|
|
|
|
const userNameInput = document.getElementById("un");
|
|
const pwsInput = document.getElementsByClassName("psw")[0];
|
|
|
|
userNameInput.onblur = function () {
|
|
if (!this.value) {
|
|
this.value = "请输入用户名";
|
|
this.style.color = "rgb(255,0,0)"
|
|
}
|
|
}
|
|
userNameInput.onfocus = function () {
|
|
if (this.value === "请输入用户名") {
|
|
this.value = "";
|
|
this.style.color = "black";
|
|
}
|
|
}
|
|
|
|
userForm.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
|
|
const userNameInputVal = userNameInput.value.trim();
|
|
const pwsInputVal = pwsInput.value.trim();
|
|
|
|
if (!userNameInputVal)
|
|
alert("用户名不能为空");
|
|
else if (!pwsInputVal)
|
|
alert("密码不能为空");
|
|
else if (userNameInputVal.length < 6 || userNameInputVal.length > 10)
|
|
alert("用户名长度应在 6 到 10 个字符之间");
|
|
else if (pwsInputVal.length < 6 || pwsInputVal.length > 10)
|
|
alert("密码长度应在 6 到 10 个字符之间");
|
|
else {
|
|
alert("验证成功");
|
|
userForm.submit();
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |