以下是一个使用正则表达式验证输入字段的 HTML 和 JavaScript 登录页面示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script>
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
var usernameRegex = /^[a-zA-Z0-9]+$/;
var passwordRegex = /^[a-zA-Z0-9!@#$%^&*()_+,-https://blog.csdn.net/m0_56312312/article/details/:;<=>?@[]^_`{|}~]+$/;
if (username == "" || password == "") {
alert("Please fill in all fields.");
return false;
}
if (!usernameRegex.test(username) || !passwordRegex.test(password)) {
alert("Invalid username or password.");
return false;
}
}
</script>
</head>
<body>
<h1>Login Page</h1>
<form name="loginForm" onsubmit="return validateForm()" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
在上面的代码中，我们定义了两个正则表达式：
- `usernameRegex`：只允许字母和数字的用户名，长度不限。
- `passwordRegex`：允许字母、数字和特殊字符的密码，长度不限。
我们在 `validateForm()` 函数中使用了 `test()` 方法来检查输入字段是否满足这些正则表达式。如果输入不符合要求，我们会弹出一个警告框并返回 `false`，以阻止表单提交。否则，表单会被提交，可以在后端进行进一步验证和处理。
