设计一个网页实现登陆和注册表单,要求:实现表单校验功能;用户名、密码长度6-16位;提交时不能为空;密码不能包含用户名,否则提示错误。
时间: 2023-12-03 13:46:05 浏览: 87
好的,以下是一个简单的登陆和注册表单的HTML代码,包含了所需的表单校验功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type="text"],
input[type="password"] {
margin: 10px;
padding: 5px;
width: 300px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
margin: 10px;
padding: 10px;
width: 150px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0069d9;
}
.error {
color: red;
font-size: 12px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<form method="post" onsubmit="return validateForm()">
<h2>Login/Register Form</h2>
<label>Username:</label>
<input type="text" name="username" id="username">
<div id="usernameError" class="error"></div>
<label>Password:</label>
<input type="password" name="password" id="password">
<div id="passwordError" class="error"></div>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
// 获取表单元素
var usernameInput = document.getElementById("username");
var passwordInput = document.getElementById("password");
// 获取表单值
var username = usernameInput.value.trim();
var password = passwordInput.value.trim();
// 校验用户名
if (username.length < 6 || username.length > 16) {
document.getElementById("usernameError").innerHTML = "用户名长度必须在6-16位之间";
return false;
} else {
document.getElementById("usernameError").innerHTML = "";
}
// 校验密码
if (password.length < 6 || password.length > 16) {
document.getElementById("passwordError").innerHTML = "密码长度必须在6-16位之间";
return false;
} else if (password === username) {
document.getElementById("passwordError").innerHTML = "密码不能包含用户名";
return false;
} else {
document.getElementById("passwordError").innerHTML = "";
}
// 提交表单
return true;
}
</script>
</body>
</html>
```
在这个表单中,我们使用了HTML5的`<input>`元素来创建表单。我们还使用了一些CSS样式来美化表单。
在JavaScript中,我们定义了一个`validateForm()`函数来校验表单。该函数首先获取了表单元素和值,然后对用户名和密码进行校验。如果校验不通过,则在页面上显示错误信息,并返回`false`以阻止表单提交。如果校验通过,则返回`true`以允许表单提交。
需要注意的是,我们在校验密码时使用了一个特殊的条件:密码不能包含用户名。为了实现这个功能,我们在校验密码时先使用`trim()`函数去除输入的空格,然后使用`===`运算符进行比较。如果密码等于用户名,则弹出错误信息并返回`false`。
这是一个简单的登陆和注册表单,可以根据实际需求进行修改。
阅读全文