当每个input输入结束,直接检测 (onblur) - 姓名要求,*4到16位,字母,数字,下划线,减号* - 密码要求,*8到15位,字母,数字或下划线字符* - 如果输入不对,在各自input的下方,输出错误信息 - 如果输入正确,则不显示信息,并且如果之前有错误信息,则清除。 - send按钮,在检测没有全部完成前,不能触发点击事件。 (disabled) -->
时间: 2023-11-17 09:07:07 浏览: 54
好的,这个问题需要使用JavaScript来完成。以下是实现上述要求的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<form>
<div>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" onblur="validateName()">
<span id="name-error" style="color: red;"></span>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" onblur="validatePassword()">
<span id="password-error" style="color: red;"></span>
</div>
<button id="send" type="submit" disabled>发送</button>
</form>
<script>
function validateName() {
var nameInput = document.getElementById('name');
var nameError = document.getElementById('name-error');
var name = nameInput.value;
var pattern = /^[a-zA-Z0-9_-]{4,16}$/;
if (!pattern.test(name)) {
nameError.innerText = '姓名格式不正确';
nameInput.classList.add('error');
enableSendButton(false);
} else {
nameError.innerText = '';
nameInput.classList.remove('error');
enableSendButton(true);
}
}
function validatePassword() {
var passwordInput = document.getElementById('password');
var passwordError = document.getElementById('password-error');
var password = passwordInput.value;
var pattern = /^[a-zA-Z0-9_]{8,15}$/;
if (!pattern.test(password)) {
passwordError.innerText = '密码格式不正确';
passwordInput.classList.add('error');
enableSendButton(false);
} else {
passwordError.innerText = '';
passwordInput.classList.remove('error');
enableSendButton(true);
}
}
function enableSendButton(enable) {
var sendButton = document.getElementById('send');
sendButton.disabled = !enable;
}
</script>
</body>
</html>
```
在上述代码中,validateName() 和 validatePassword() 分别用于验证姓名和密码的输入是否符合要求。如果输入不正确,会在相应的输入框下方显示错误信息,同时禁用 send 按钮。如果输入正确,则清除错误信息,并且如果之前有错误信息,则清除。enableSendButton() 用于启用或禁用 send 按钮。在调用 validateName() 和 validatePassword() 时,使用 onblur 事件来检测输入是否结束。
注:代码中的正则表达式仅作为示例,请根据实际需求自行编写。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)