用JavaScript写一个登录注册两个页面 要运用到正则表达式
时间: 2023-11-27 13:05:27 浏览: 33
好的,下面是一个简单的登录注册两个页面的实现,包括正则表达式的运用。
首先是HTML代码,包括两个页面的布局和表单:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Register</title>
</head>
<body>
<div id="login-page">
<h1>Login</h1>
<form>
<input type="text" placeholder="Username" id="login-username">
<input type="password" placeholder="Password" id="login-password">
<button type="submit" id="login-button">Login</button>
</form>
<p>Don't have an account? <a href="#" id="register-link">Register</a></p>
</div>
<div id="register-page" style="display:none;">
<h1>Register</h1>
<form>
<input type="text" placeholder="Username" id="register-username">
<input type="password" placeholder="Password" id="register-password">
<input type="password" placeholder="Confirm Password" id="register-confirm-password">
<button type="submit" id="register-button">Register</button>
</form>
<p>Already have an account? <a href="#" id="login-link">Login</a></p>
</div>
<script src="login-register.js"></script>
</body>
</html>
```
接下来是JavaScript代码,包括正则表达式的运用:
```javascript
// 匹配用户名和密码的正则表达式
const usernameRegex = /^[a-zA-Z0-9_-]{3,16}$/;
const passwordRegex = /^[a-zA-Z0-9_-]{6,18}$/;
// 登录页面DOM元素
const loginPage = document.getElementById('login-page');
const loginUsername = document.getElementById('login-username');
const loginPassword = document.getElementById('login-password');
const loginButton = document.getElementById('login-button');
const registerLink = document.getElementById('register-link');
// 注册页面DOM元素
const registerPage = document.getElementById('register-page');
const registerUsername = document.getElementById('register-username');
const registerPassword = document.getElementById('register-password');
const registerConfirmPassword = document.getElementById('register-confirm-password');
const registerButton = document.getElementById('register-button');
const loginLink = document.getElementById('login-link');
// 切换到登录页面
function showLoginPage() {
loginPage.style.display = 'block';
registerPage.style.display = 'none';
}
// 切换到注册页面
function showRegisterPage() {
loginPage.style.display = 'none';
registerPage.style.display = 'block';
}
// 验证登录表单
function validateLoginForm() {
const username = loginUsername.value.trim();
const password = loginPassword.value.trim();
if (!usernameRegex.test(username)) {
alert('Invalid username! Username should contain only letters, digits, underscores and hyphens, and should be 3-16 characters long.');
return false;
}
if (!passwordRegex.test(password)) {
alert('Invalid password! Password should contain only letters, digits, underscores and hyphens, and should be 6-18 characters long.');
return false;
}
return true;
}
// 验证注册表单
function validateRegisterForm() {
const username = registerUsername.value.trim();
const password = registerPassword.value.trim();
const confirmPassword = registerConfirmPassword.value.trim();
if (!usernameRegex.test(username)) {
alert('Invalid username! Username should contain only letters, digits, underscores and hyphens, and should be 3-16 characters long.');
return false;
}
if (!passwordRegex.test(password)) {
alert('Invalid password! Password should contain only letters, digits, underscores and hyphens, and should be 6-18 characters long.');
return false;
}
if (password !== confirmPassword) {
alert('Passwords do not match!');
return false;
}
return true;
}
// 绑定事件
loginButton.addEventListener('click', function(event) {
if (!validateLoginForm()) {
event.preventDefault();
}
});
registerButton.addEventListener('click', function(event) {
if (!validateRegisterForm()) {
event.preventDefault();
}
});
registerLink.addEventListener('click', function(event) {
event.preventDefault();
showRegisterPage();
});
loginLink.addEventListener('click', function(event) {
event.preventDefault();
showLoginPage();
});
// 初始显示登录页面
showLoginPage();
```
注意,上面的代码只是一个简单的示例,实际情况下需要更完善的验证和安全措施。