用js写一个注册页面附带校验并且支持跳转
时间: 2024-02-28 08:53:13 浏览: 18
好的,以下是一个简单的注册页面实现,包括表单校验和跳转功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<form id="register-form" onsubmit="return validateForm()" action="success.html">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="注册">
</form>
<script>
function validateForm() {
// 获取表单元素
var username = document.getElementById("username");
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirm-password");
var email = document.getElementById("email");
// 验证用户名是否为空
if (username.value == "") {
alert("用户名不能为空");
return false;
}
// 验证密码是否为空
if (password.value == "") {
alert("密码不能为空");
return false;
}
// 验证确认密码是否为空
if (confirmPassword.value == "") {
alert("确认密码不能为空");
return false;
}
// 验证密码和确认密码是否一致
if (password.value != confirmPassword.value) {
alert("密码和确认密码不一致");
return false;
}
// 验证邮箱格式是否正确
var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
if (!emailPattern.test(email.value)) {
alert("邮箱格式不正确");
return false;
}
// 所有校验通过,返回true,表单提交成功
return true;
}
</script>
</body>
</html>
```
在上面的代码中,我们通过表单元素的id获取表单元素,并在`validateForm()`函数中对表单元素进行校验。如果校验不通过,我们使用`alert()`函数弹出提示框,并返回`false`,阻止表单提交。如果所有校验通过,我们返回`true`,表单提交成功。在表单中,我们使用`onsubmit`事件来触发表单提交,并在`action`属性中指定跳转的页面。