简单登录注册页面(包括js)
时间: 2023-10-20 11:14:59 浏览: 40
以下是一个简单的登录注册页面,包括了一些基本的 JavaScript 验证:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录/注册页面</title>
<script src="login.js"></script>
</head>
<body>
<h1>欢迎来到我的网站!</h1>
<h2>请登录或注册</h2>
<form id="login-form" onsubmit="return validateLogin()" method="post">
<label for="login-email">邮箱:</label>
<input type="email" id="login-email" name="login-email" required><br>
<label for="login-password">密码:</label>
<input type="password" id="login-password" name="login-password" required><br>
<input type="submit" value="登录">
</form>
<form id="register-form" onsubmit="return validateRegister()" method="post">
<label for="register-email">邮箱:</label>
<input type="email" id="register-email" name="register-email" required><br>
<label for="register-password">密码:</label>
<input type="password" id="register-password" name="register-password" required><br>
<label for="register-confirm-password">确认密码:</label>
<input type="password" id="register-confirm-password" name="register-confirm-password" required><br>
<input type="submit" value="注册">
</form>
</body>
</html>
```
JavaScript 代码(存储在 `login.js` 文件中):
```
function validateLogin() {
var email = document.getElementById("login-email").value;
var password = document.getElementById("login-password").value;
// 确认邮箱和密码都不为空
if (email == "" || password == "") {
alert("邮箱和密码不能为空!");
return false;
}
// 验证邮箱格式
var emailPattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!email.match(emailPattern)) {
alert("请使用有效的邮箱地址!");
return false;
}
// 验证密码长度
if (password.length < 6) {
alert("密码长度至少为6位!");
return false;
}
return true;
}
function validateRegister() {
var email = document.getElementById("register-email").value;
var password = document.getElementById("register-password").value;
var confirmPassword = document.getElementById("register-confirm-password").value;
// 确认邮箱、密码、确认密码都不为空
if (email == "" || password == "" || confirmPassword == "") {
alert("邮箱、密码和确认密码不能为空!");
return false;
}
// 验证邮箱格式
var emailPattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!email.match(emailPattern)) {
alert("请使用有效的邮箱地址!");
return false;
}
// 验证密码长度
if (password.length < 6) {
alert("密码长度至少为6位!");
return false;
}
// 确认密码与密码一致
if (password != confirmPassword) {
alert("密码和确认密码不一致!");
return false;
}
return true;
}
```
该页面包括两个表单:一个用于登录,一个用于注册。在每个表单中,我们需要对用户输入的数据进行一些简单的验证。我们使用 `onsubmit` 属性来调用 JavaScript 函数来验证表单数据。在这些函数中,我们首先获取用户输入的数据,然后使用一些正则表达式和条件语句进行验证。如果任何验证失败,我们会弹出一个警告框并返回 `false`,以防止表单被提交。如果所有验证都通过,我们将返回 `true`,表单将被提交。