写一个前端页面,需要输入用户Id和用户密码进行登录,重置则清空输入框内容,点击登录按钮完成 form表单验证,用户ID不能为空,只能是字母;密码必须是纯数字6位,校验通过跳转到showMess.html页面
时间: 2024-01-08 20:04:35 浏览: 35
好的,您的问题我已经收到了,下面是我的回答。
首先,我们需要编写一个 HTML 页面,包含一个表单和一些 JavaScript 代码来实现验证和跳转功能。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<form>
<label for="userId">User ID:</label>
<input type="text" id="userId" name="userId"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="submitForm()">Login</button>
<button type="button" onclick="resetForm()">Reset</button>
</form>
<script>
function submitForm() {
// 获取用户输入的值
var userId = document.getElementById("userId").value;
var password = document.getElementById("password").value;
// 校验用户ID和密码
if (userId === "") {
alert("User ID cannot be empty!");
return;
}
if (!/^[a-zA-Z]+$/.test(userId)) {
alert("User ID can only be letters!");
return;
}
if (password === "") {
alert("Password cannot be empty!");
return;
}
if (!/^\d{6}$/.test(password)) {
alert("Password must be 6 digits!");
return;
}
// 跳转到 showMess.html 页面
window.location.href = "showMess.html";
}
function resetForm() {
// 清空输入框内容
document.getElementById("userId").value = "";
document.getElementById("password").value = "";
}
</script>
</body>
</html>
```
上面的代码中,我们定义了一个表单,包含一个用户ID输入框和一个密码输入框,以及一个登录按钮和一个重置按钮。当用户点击登录按钮时,我们会获取用户ID和密码的值,并进行校验。如果校验通过,则跳转到 showMess.html 页面。如果校验不通过,则弹出相应的提示信息。当用户点击重置按钮时,我们会清空输入框的内容。
接下来,我们需要编写 showMess.html 页面来展示登录成功的信息。这个页面非常简单,只需要一个欢迎信息即可。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Show Message</title>
</head>
<body>
<h1>Welcome!</h1>
<p>You have successfully logged in.</p>
</body>
</html>
```
这样,我们就完成了一个基本的前端登录页面的开发。