学员注册页面用js写的代码
时间: 2024-01-22 18:21:23 浏览: 21
以下是一个简单的学员注册页面的JS代码示例:
```
// 获取表单元素
const form = document.getElementById("registration-form");
const firstNameInput = document.getElementById("first-name");
const lastNameInput = document.getElementById("last-name");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
// 监听表单提交事件
form.addEventListener("submit", (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
const firstName = firstNameInput.value.trim();
const lastName = lastNameInput.value.trim();
const email = emailInput.value.trim();
const password = passwordInput.value.trim();
// 检查表单数据是否为空
if (!firstName || !lastName || !email || !password) {
alert("请填写完整的注册信息");
return;
}
// 发送注册请求到服务器
fetch("/api/register", {
method: "POST",
body: JSON.stringify({ firstName, lastName, email, password }),
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
if (response.ok) {
alert("注册成功!");
form.reset(); // 清空表单
} else {
alert("注册失败,请重试");
}
})
.catch(error => {
alert("注册失败,请重试");
console.error(error);
});
});
```
这段代码使用了原生的JavaScript来实现表单提交事件的监听和数据的获取、校验、以及发送到后端服务器的逻辑。当服务器响应成功时,会弹出一个提示框告知用户注册成功,并且清空表单中的数据;否则会提示注册失败。