点击登录按钮完成表单验证,用户ID不能为空,只能是字母;密码是纯数字6位,校验成功跳转到showMess.html页面的代码
时间: 2024-02-23 10:01:10 浏览: 153
好的,下面是一个基于JavaScript的表单验证和页面跳转的代码示例:
HTML代码:
```
<form id="loginForm">
<label for="userId">用户ID:</label>
<input type="text" id="userId" name="userId"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
```
JavaScript代码:
```
// 获取表单和输入框元素
var loginForm = document.getElementById("loginForm");
var userIdInput = document.getElementById("userId");
var passwordInput = document.getElementById("password");
// 监听表单提交事件
loginForm.addEventListener("submit", function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取输入框的值
var userId = userIdInput.value;
var password = passwordInput.value;
// 进行表单验证
if (userId === "" || !/^[a-zA-Z]+$/.test(userId)) {
alert("用户ID不能为空,只能是字母!");
return;
}
if (password === "" || !/^\d{6}$/.test(password)) {
alert("密码必须为6位纯数字!");
return;
}
// 表单验证通过,跳转到 showMess.html 页面
window.location.href = "showMess.html";
});
```
这段代码会在用户点击提交按钮时进行表单验证,如果验证通过则跳转到 showMess.html 页面,否则给出错误提示。希望这个示例可以帮助你完成你的问题。
阅读全文