JavaScript写登录注册
以下是JavaScript实现登录注册的示例代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录注册</title>
<script src="login.js"></script>
</head>
<body>
<h1>登录</h1>
<form>
用户名：<input type="text" id="username" name="username"><br>
密码：<input type="password" id="password" name="password"><br>
<input type="button" value="登录" onclick="login()">
</form>
<h1>注册</h1>
<form>
用户名：<input type="text" id="register-username" name="register-username"><br>
密码：<input type="password" id="register-password" name="register-password"><br>
确认密码：<input type="password" id="confirm-password" name="confirm-password"><br>
<input type="button" value="注册" onclick="register()">
</form>
<div id="message"></div>
</body>
</html>
JavaScript代码：
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 检查用户名和密码是否为空
if (username == "" || password == "") {
document.getElementById("message").innerHTML = "用户名和密码不能为空";
return;
}
// 发送登录请求
// 这里使用ajax实现异步请求，具体实现可以参考jQuery或者其他库
$.ajax({
type: "POST",
url: "login.php",
data: {
username: username,
password: password
},
success: function(response) {
if (response == "success") {
// 登录成功
document.getElementById("message").innerHTML = "登录成功";
} else {
// 登录失败
document.getElementById("message").innerHTML = "用户名或密码错误";
}
}
});
}
function register() {
var username = document.getElementById("register-username").value;
var password = document.getElementById("register-password").value;
var confirmPassword = document.getElementById("confirm-password").value;
// 检查用户名和密码是否为空，以及两次密码是否一致
if (username == "" || password == "" || confirmPassword == "") {
document.getElementById("message").innerHTML = "用户名和密码不能为空";
return;
} else if (password != confirmPassword) {
document.getElementById("message").innerHTML = "两次密码输入不一致";
return;
}
// 发送注册请求
// 这里使用ajax实现异步请求，具体实现可以参考jQuery或者其他库
$.ajax({
type: "POST",
url: "register.php",
data: {
username: username,
password: password
},
success: function(response) {
if (response == "success") {
// 注册成功
document.getElementById("message").innerHTML = "注册成功";
} else {
// 注册失败
document.getElementById("message").innerHTML = "用户名已存在";
}
}
});
}
这里的实现方式是通过ajax异步发送登录和注册请求，具体实现可以根据具体情况进行调整。同时，这里也没有涉及到后端的实现，需要根据自己的需求进行开发。
原文地址: https://www.cveoy.top/t/topic/b7vw 著作权归作者所有。请勿转载和采集!