用html写用户注册与登录

 <!DOCTYPE html>
<html>
<head>
<title>Registration System</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
 
h1 {
text-align: center;
}
 
form {
max-width: 400px;
margin: 0 auto;
}
 
label {
display: block;
margin-top: 10px;
}
 
input[type="text"],
input[type="password"] {
width: 100%;
padding: 5px;
margin-top: 5px;
}
 
.captcha {
display: flex;
align-items: center;
margin-top: 10px;
}
 
.captcha span {
margin-right: 10px;
}
 
.feedback {
color: red;
margin-top: 10px;
}
 
.buttons {
text-align: center;
margin-top: 10px;
}
 
.buttons button {
padding: 5px 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Registration System</h1>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<div class="captcha">
<label for="captcha">Captcha:</label>
<input type="text" id="captcha" required>
<span id="captchaText"></span>
<button type="button" onclick="refreshCaptcha()">Refresh Captcha</button>
</div>
<div class="buttons">
<button type="submit" onclick="register()">Register</button>
</div>
<div id="feedback" class="feedback"></div>
</form>
 
<div id="loginPage" style="display: none;">
<h1>Login</h1>
<form id="loginForm">
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" required>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" required>
<label for="loginCaptcha">Captcha:</label>
<input type="text" id="loginCaptcha" required>
<span id="loginCaptchaText"></span>
<button type="button" onclick="refreshLoginCaptcha()">Refresh Captcha</button>
<div class="buttons">
<button type="submit" onclick="login()">Login</button>
</div>
<div id="loginFeedback" class="feedback"></div>
</form>
</div>
 
<div id="welcomePage" style="display: none;">
<h1>Welcome</h1>
<div id="welcomeMessage"></div>
<div id="currentTime"></div>
</div>
 
<script>
function refreshCaptcha() {
var captchaText = document.getElementById("captchaText");
var randomString = generateRandomString(8);
captchaText.textContent = randomString;
}
 
function refreshLoginCaptcha() {
var loginCaptchaText = document.getElementById("loginCaptchaText");
var randomString = generateRandomString(8);
loginCaptchaText.textContent = randomString;
}
 
function generateRandomString(length) {
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var randomString = "";
for (var i = 0; i < length; i++) {
var randomIndex = Math.floor(Math.random() * characters.length);
randomString += characters.charAt(randomIndex);
}
return randomString;
}
 
function register() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var captcha = document.getElementById("captcha").value;
var captchaText = document.getElementById("captchaText").textContent;
 
if (captcha !== captchaText) {
document.getElementById("feedback").textContent = "Invalid captcha. Please try again.";
refreshCaptcha();
return;
}
 
if (!isValidUsername(username) || !isValidPassword(password)) {
document.getElementById("feedback").textContent = "Invalid username or password. Please try again.";
refreshCaptcha();
return;
}
 
alert("Registration successful!");
document.getElementById("registrationForm").reset();
showLoginPage();
}
 
function login() {
var loginUsername = document.getElementById("loginUsername").value;
var loginPassword = document.getElementById("loginPassword").value;
var loginCaptcha = document.getElementById("loginCaptcha").value;
var loginCaptchaText = document.getElementById("loginCaptchaText").textContent;
 
if (loginCaptcha !== loginCaptchaText) {
document.getElementById("loginFeedback").textContent = "Invalid captcha. Please try again.";
refreshLoginCaptcha();
return;
}
 
if (!isValidUsername(loginUsername) || !isValidPassword(loginPassword)) {
document.getElementById("loginFeedback").textContent = "Invalid username or password. Please try again.";
refreshLoginCaptcha();
return;
}
 
alert("Login successful!");
document.getElementById("loginForm").reset();
showWelcomePage(loginUsername);
}
 
function showLoginPage() {
document.getElementById("registrationForm").style.display = "none";
document.getElementById("loginPage").style.display = "block";
refreshLoginCaptcha();
}
 
function showWelcomePage(username) {
document.getElementById("loginPage").style.display = "none";
document.getElementById("welcomePage").style.display = "block";
document.getElementById("welcomeMessage").textContent = "Hello, " + username + "!";
updateTime();
}
 
function updateTime() {
var currentTime = document.getElementById("currentTime");
var date = new Date();
currentTime.textContent = "Current time: " + date.toLocaleTimeString();
setTimeout(updateTime, 1000);
}
 
function isValidUsername(username) {
var regex = /^[a-zA-Z0-9]{8,20}$/;
return regex.test(username);
}
 
function isValidPassword(password) {
var regex = /^[a-zA-Z0-9]{8,16}$/;
return regex.test(password);
}
</script>
</body>
</html>

本文作者：丰川扬子

本文链接：https://www.cnblogs.com/newzeon/p/17734601.html

posted @ 2023-09-27 22:54 丰川扬子阅读(183) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：丰川扬子园龄：1年10个月粉丝：1 关注：1

昵称：丰川扬子
园龄： 1年10个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

用html写用户注册与登录

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<title>Registration System</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 20px;
	}

	h1 {
	text-align: center;
	}

	form {
	max-width: 400px;
	margin: 0 auto;
	}

	label {
	display: block;
	margin-top: 10px;
	}

	input[type="text"],
	input[type="password"] {
	width: 100%;
	padding: 5px;
	margin-top: 5px;
	}

	.captcha {
	display: flex;
	align-items: center;
	margin-top: 10px;
	}

	.captcha span {
	margin-right: 10px;
	}

	.feedback {
	color: red;
	margin-top: 10px;
	}

	.buttons {
	text-align: center;
	margin-top: 10px;
	}

	.buttons button {
	padding: 5px 10px;
	margin-right: 5px;
	}
	</style>
	</head>
	<body>
	<h1>Registration System</h1>
	<form id="registrationForm">
	<label for="username">Username:</label>
	<input type="text" id="username" required>
	<label for="password">Password:</label>
	<input type="password" id="password" required>
	<div class="captcha">
	<label for="captcha">Captcha:</label>
	<input type="text" id="captcha" required>
	<span id="captchaText"></span>
	<button type="button" onclick="refreshCaptcha()">Refresh Captcha</button>
	</div>
	<div class="buttons">
	<button type="submit" onclick="register()">Register</button>
	</div>
	<div id="feedback" class="feedback"></div>
	</form>

	<div id="loginPage" style="display: none;">
	<h1>Login</h1>
	<form id="loginForm">
	<label for="loginUsername">Username:</label>
	<input type="text" id="loginUsername" required>
	<label for="loginPassword">Password:</label>
	<input type="password" id="loginPassword" required>
	<label for="loginCaptcha">Captcha:</label>
	<input type="text" id="loginCaptcha" required>
	<span id="loginCaptchaText"></span>
	<button type="button" onclick="refreshLoginCaptcha()">Refresh Captcha</button>
	<div class="buttons">
	<button type="submit" onclick="login()">Login</button>
	</div>
	<div id="loginFeedback" class="feedback"></div>
	</form>
	</div>

	<div id="welcomePage" style="display: none;">
	<h1>Welcome</h1>
	<div id="welcomeMessage"></div>
	<div id="currentTime"></div>
	</div>

	<script>
	function refreshCaptcha() {
	var captchaText = document.getElementById("captchaText");
	var randomString = generateRandomString(8);
	captchaText.textContent = randomString;
	}

	function refreshLoginCaptcha() {
	var loginCaptchaText = document.getElementById("loginCaptchaText");
	var randomString = generateRandomString(8);
	loginCaptchaText.textContent = randomString;
	}

	function generateRandomString(length) {
	var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
	var randomString = "";
	for (var i = 0; i < length; i++) {
	var randomIndex = Math.floor(Math.random() * characters.length);
	randomString += characters.charAt(randomIndex);
	}
	return randomString;
	}

	function register() {
	var username = document.getElementById("username").value;
	var password = document.getElementById("password").value;
	var captcha = document.getElementById("captcha").value;
	var captchaText = document.getElementById("captchaText").textContent;

	if (captcha !== captchaText) {
	document.getElementById("feedback").textContent = "Invalid captcha. Please try again.";
	refreshCaptcha();
	return;
	}

	if (!isValidUsername(username) \|\| !isValidPassword(password)) {
	document.getElementById("feedback").textContent = "Invalid username or password. Please try again.";
	refreshCaptcha();
	return;
	}

	alert("Registration successful!");
	document.getElementById("registrationForm").reset();
	showLoginPage();
	}

	function login() {
	var loginUsername = document.getElementById("loginUsername").value;
	var loginPassword = document.getElementById("loginPassword").value;
	var loginCaptcha = document.getElementById("loginCaptcha").value;
	var loginCaptchaText = document.getElementById("loginCaptchaText").textContent;

	if (loginCaptcha !== loginCaptchaText) {
	document.getElementById("loginFeedback").textContent = "Invalid captcha. Please try again.";
	refreshLoginCaptcha();
	return;
	}

	if (!isValidUsername(loginUsername) \|\| !isValidPassword(loginPassword)) {
	document.getElementById("loginFeedback").textContent = "Invalid username or password. Please try again.";
	refreshLoginCaptcha();
	return;
	}

	alert("Login successful!");
	document.getElementById("loginForm").reset();
	showWelcomePage(loginUsername);
	}

	function showLoginPage() {
	document.getElementById("registrationForm").style.display = "none";
	document.getElementById("loginPage").style.display = "block";
	refreshLoginCaptcha();
	}

	function showWelcomePage(username) {
	document.getElementById("loginPage").style.display = "none";
	document.getElementById("welcomePage").style.display = "block";
	document.getElementById("welcomeMessage").textContent = "Hello, " + username + "!";
	updateTime();
	}

	function updateTime() {
	var currentTime = document.getElementById("currentTime");
	var date = new Date();
	currentTime.textContent = "Current time: " + date.toLocaleTimeString();
	setTimeout(updateTime, 1000);
	}

	function isValidUsername(username) {
	var regex = /^[a-zA-Z0-9]{8,20}$/;
	return regex.test(username);
	}

	function isValidPassword(password) {
	var regex = /^[a-zA-Z0-9]{8,16}$/;
	return regex.test(password);
	}
	</script>
	</body>
	</html>