人气排行榜
使用HTML、CSS和JavaScript构建高效且可维护的Web应用程序 (使用HTML+CSS制作注册和登录界面)
文章编号：41481 /
分类：行业资讯 /
更新时间：2024-12-14 11:25:49 / 浏览：次
javascript构" loading="lazy">
css
/ 重置样式 /{margin: 0;padding: 0;box-sizing: border-box;
}/ 公共样式 /
body{font-family: Arial, sans-serif;background-color: f5f5f5;
}.container {display: flex;justify-Content: center;align-items: center;height: 100vh;
}.form-container {width: 300px;padding: 30px;background-color: fff;margin: 0 10px;
}h2 {text-align: center;margin-bottom: 30px;
}label {font-weight: bold;margin-bottom: 5px;
}input {width: 100%;height: 30px;padding: 5px;border: 1px solid ccc;margin-bottom: 10px;
}button {width: 100%;height: 30px;background-color: 337ab7;color: fff;border: none;border-radius: 5px;cursor: pointer;
}/ 注册表单 /
register-form {display: flex;flex-direction: column;gap: 10px;
}register-btn {margin-top: 20px;
}/ 登录表单 /
login-form {display: flex;flex-direction: column;gap: 10px;
}login-btn {margin-top: 20px;
}
javascript
// 注册表单验证
const registerForm = document.getElementById("register-form");
registerForm.addEventListener("submit", (e) => {e.preventDefault();const username = document.getElementById("username").value;const email = document.getElementById("email").value;const password = document.getElementById("password").value;const confirmPassword = document.getElementById("confirm-password").value;if (!username || !email || !password) {alert("请填写所有必填项");
return;}if (password !== confirmPassword) {alert("两次输入的密码不一致");return;}// 发送注册请求（这里用一个模拟请求代替）const request = new XMLHttpRequest();request.open("POST", "/api/register");request.setRequestHeader("Content-Type", "application/json");request.send(JSON.stringify({ username, email, password }));request.onload = () => {if (request.status === 201) {alert("注册成功！");} else {alert("注册失败，请重试！");}};
});// 登录表单验证
const loginForm = document.getElementById("login-form");
loginForm.addEventListener("submit", (e) => {e.preventDefault();const username = document.getElementById("username").value;const password = document.getElementById("password").value;if (!username || !password) {alert("请填写所有必填项");return;}// 发送登录请求（这里用一个模拟请求代替）const request = new XMLHttpRequest();request.open("POST", "/api/login");request.setRequestHeader("Content-Type", "application/json");request.send(JSON.stringify({ username, password }));request.onload = () => {if (request.status === 200) {// 登录成功，跳转到主页window.location.href = "/";} else {alert("登录失败，请重试！");}};
});
相关标签： 使用HTML、 CSS和JavaScript构建高效且可维护的Web应用程序、 使用HTML、 CSS制作注册和登录界面、
注册
javascript构" loading="lazy">
登录
相关标签： 使用HTML、 CSS和JavaScript构建高效且可维护的Web应用程序、 使用HTML、 CSS制作注册和登录界面、
本文地址：http://www.hyyidc.com/article/41481.html
做上本站友情链接,在您站上点击一次,即可自动收录并自动排在本站第一位！
<a href="http://www.hyyidc.com/" target="_blank">好有缘导航网</a>
<a href="http://www.hyyidc.com/" target="_blank">好有缘导航网</a>
