做一个javaweb所有字体均是红色 2 用户ID输入框获取焦点的时候边框变成浅蓝也失去焦点的时候边框变成原来的灰色或者黑色;密码输入框效果也是这样 3点击登录按钮完成form表单验证: javaweb输入框用户ID不能为空,只能是字母 密码纯数字6位否则不跳转 校验通过跳转到showMess.html展示用户信息
时间: 2024-02-23 09:01:54 浏览: 71
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
好的,这是一个比较具体的问题,需要一定的代码实现。以下是一个可能的实现方案:
1. 在CSS文件中定义所有字体为红色:
```
* {
color: red;
}
```
2. 使用JavaScript监听输入框的焦点事件,当输入框获得焦点时设置边框为浅蓝色,失去焦点时设置边框为原来的颜色:
```
var userIdInput = document.getElementById("userIdInput");
var passwordInput = document.getElementById("passwordInput");
userIdInput.addEventListener("focus", function() {
this.style.border = "1px solid lightblue";
});
userIdInput.addEventListener("blur", function() {
this.style.border = "1px solid gray";
});
passwordInput.addEventListener("focus", function() {
this.style.border = "1px solid lightblue";
});
passwordInput.addEventListener("blur", function() {
this.style.border = "1px solid gray";
});
```
3. 使用JavaScript监听表单的提交事件,在提交表单之前进行表单验证,如果验证不通过则阻止表单提交,否则跳转到showMess.html展示用户信息:
```
var form = document.getElementById("loginForm");
form.addEventListener("submit", function(event) {
var userIdValue = document.getElementById("userIdInput").value.trim();
var passwordValue = document.getElementById("passwordInput").value.trim();
if (userIdValue === "") {
alert("用户ID不能为空");
event.preventDefault();
return;
}
if (!/^[a-zA-Z]+$/.test(userIdValue)) {
alert("用户ID只能是字母");
event.preventDefault();
return;
}
if (passwordValue === "") {
alert("密码不能为空");
event.preventDefault();
return;
}
if (!/^\d{6}$/.test(passwordValue)) {
alert("密码必须是6位纯数字");
event.preventDefault();
return;
}
});
```
希望这个实现方案能够帮到您。需要注意的是,这只是一个简单的实现方案,您可以根据实际需求进行修改和优化。
阅读全文