js正则表达式登录显示提示
用js正则表达式判断用户登录信息并作判断显示错误提示，获取用户的username和用户密码password并在输入框下面隐藏提示，当用户输入的数字不符号特定条件时，显示提示错误并输入框变红色
1、效果如下
2、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<style>
.input-error {
border: 1px solid red;
}
</style>
</head>
<body>
<form id="loginForm">
<div>
<label for="username">账号:</label>
<input type="text" name="username" id="username" required>
<span class="error-message" id="username-error"></span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" required>
<span class="error-message" id="password-error"></span>
</div>
<button type="submit">Login</button>
</form>
<script>
const form = document.querySelector('#loginForm');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
// 校验用户名是否符合要求
function validateUsername() {
const username = usernameInput.value.trim();
const usernameError = document.querySelector('#username-error');
if (username.length < 6) {
usernameError.textContent = '账号长度必须大于6位';
usernameInput.classList.add('input-error');
return false;
} else {
usernameError.textContent = '';
usernameInput.classList.remove('input-error');
return true;
}
}
// 校验密码是否符合要求
function validatePassword() {
const password = passwordInput.value.trim();
const passwordError = document.querySelector('#password-error');
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
if (!passwordPattern.test(password)) {
passwordError.textContent = '必须大于8位，且包含英文大小写';
passwordInput.classList.add('input-error');
return false;
} else {
passwordError.textContent = '';
passwordInput.classList.remove('input-error');
return true;
}
}
// 校验表单
function validateForm() {
const isValidUsername = validateUsername();
const isValidPassword = validatePassword();
return isValidUsername && isValidPassword;
}
// 监听表单的提交事件
form.addEventListener('submit', (event) => {
event.preventDefault();
if (validateForm()) {
// 表单校验通过，可以提交登录信息
console.log('Login successful!');
} else {
// 表单校验不通过，显示错误提示
console.log('Login failed!');
}
});
// 监听用户名输入框的变化
usernameInput.addEventListener('input', () => {
validateUsername();
});
// 监听密码输入框的变化
passwordInput.addEventListener('input', () => {
validatePassword();
});
</script>
</body>
</html>
以下是一个完整的 HTML 文件，包含了提到的表单和 JavaScript 代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>登录</title>
<style>
.error {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>登录</h1>
<form>
<div>
<label>用户名：</label>
<input type="text" id="username" />
<span class="error" id="usernameError"></span>
</div>
<div>
<label>密码：</label>
<input type="password" id="password" />
<span class="error" id="passwordError"></span>
</div>
<button type="submit">登录</button>
</form>
<script>
const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
const usernameError = document.querySelector('#usernameError');
const passwordError = document.querySelector('#passwordError');
const USERNAME_PATTERN = /^[a-zA-Z0-9_]{1,20}$/;
const PASSWORD_PATTERN = /^[a-zA-Z0-9!@#$%^&*()_+=[\]{};':"\\|,.<>/?-]{6,20}$/;
// 绑定表单提交事件
form.addEventListener('submit', (event) => {
// 取消默认行为
event.preventDefault();
// 验证用户名是否合法
if (!USERNAME_PATTERN.test(username.value)) {
// 如果不合法，则显示错误信息
usernameError.textContent = '用户名必须为1-20位字母、数字或下划线';
// 并将输入框变红色
username.classList.add('error');
} else {
// 如果合法，则清空错误信息
usernameError.textContent = '';
// 并将输入框恢复原来的样式
username.classList.remove('error');
}
// 验证密码是否合法
if (!PASSWORD_PATTERN.test(password.value)) {
// 如果不合法，则显示错误信息
passwordError.textContent = '密码必须为6-20位字母、数字或特殊字符';
// 并将输入框变红色
password.classList.add('error');
} else {
// 如果合法，则清空错误信息
passwordError.textContent = '';
// 并将输入框恢复原来的样式
password.classList.remove('error');
}
});
</script>
</body>
</html>
你可以创建一个新的 HTML 文件，将上面的代码复制到文件中，并在浏览器中打开该文件来查看效果。
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var username_prompt = document.getElementById("username_prompt");
var password_prompt = document.getElementById("password_prompt");
// 用户名 regex
var username_regex = /^[a-z0-9]{5,12}$/;
if(!username_regex.test(username)) {
username_prompt.textContent = "用户名必须是5-12位的字母数字组合!";
document.getElementById("username").style.borderColor = "red";
} else {
username_prompt.textContent = "";
document.getElementById("username").style.borderColor = "";
}
// 密码 regex
var password_regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
if(!password_regex.test(password)) {
password_prompt.textContent = "密码必须至少8位,包含大写字母、小写字母和数字!";
document.getElementById("password").style.borderColor = "red";
} else {
password_prompt.textContent = "";
document.getElementById("password").style.borderColor = "";
}
}
望采纳！