编写代码,当密码框失去焦点时,检测是否为空,或者密码长度是否在5-10之间,否则在密码框右侧显示提示信息
时间: 2024-02-26 10:56:43 浏览: 10
好的,以下是一个简单的示例代码:
```html
<!-- 在HTML中添加一个密码输入框 -->
<input type="password" id="password-input">
<!-- 在HTML中添加一个用于显示提示信息的元素 -->
<div id="password-tip" style="display: none;color: red;"></div>
```
```javascript
// 获取密码输入框元素和提示信息元素
const passwordInput = document.getElementById('password-input');
const passwordTip = document.getElementById('password-tip');
// 给密码输入框添加失去焦点事件监听器
passwordInput.addEventListener('blur', () => {
// 获取密码输入框的值
const password = passwordInput.value;
// 判断密码是否为空或长度是否在5-10之间
if (password === '' || password.length < 5 || password.length > 10) {
// 如果密码不符合要求,则显示提示信息
passwordTip.innerHTML = '密码长度必须为 5-10 位';
passwordTip.style.display = 'block';
} else {
// 否则隐藏提示信息
passwordTip.style.display = 'none';
}
});
```
当密码输入框失去焦点时,会触发 `blur` 事件,代码会获取密码输入框的值,并判断密码是否为空或长度是否在5-10之间。如果密码不符合要求,则在密码框右侧显示提示信息,否则隐藏提示信息。