实现对密码框的非空及长度检测,在右侧显示错误信息,得到焦点时清除右侧的错误提示信息
时间: 2024-02-26 11:59:24 浏览: 9
好的,我理解您的问题了。这里给出一个简单的实现示例,供您参考:
在 HTML 中,您可以这样定义一个密码框和一个错误提示信息的容器:
```html
<input type="password" id="password" onblur="checkPassword()" onfocus="clearError()">
<div id="error"></div>
```
其中,`onblur` 属性指定当密码框失去焦点时调用 `checkPassword()` 函数,`onfocus` 属性指定当密码框获得焦点时调用 `clearError()` 函数。
在 JavaScript 中,您可以像这样实现这两个函数:
```javascript
function checkPassword() {
var password = document.getElementById("password").value;
var error = document.getElementById("error");
if (password == "") {
error.innerText = "密码不能为空";
} else if (password.length < 6) {
error.innerText = "密码长度不能少于6位";
} else {
error.innerText = "";
}
}
function clearError() {
var error = document.getElementById("error");
error.innerText = "";
}
```
其中,`checkPassword()` 函数获取密码框的值,并根据非空及长度检测的结果设置错误提示信息的内容;`clearError()` 函数清除错误提示信息的内容。
您可以在测试时输入不同的密码,观察错误提示信息的变化。希望这个示例能够帮到您。