[JavaScript]使用JavaScript+CSS实现注册页面中检验两次密码输入是否相同
时间: 2023-12-26 16:03:30 浏览: 121
可以使用JavaScript和CSS来实现注册页面中检验两次密码输入是否相同,具体实现如下:
1. 在HTML中添加两个密码输入框和一个用于显示错误信息的标签:
```html
<label>密码:</label>
<input type="password" id="password">
<br>
<label>确认密码:</label>
<input type="password" id="confirmPassword">
<span id="error"></span>
```
2. 在CSS中定义错误信息的样式:
```css
#error {
color: red;
font-size: 12px;
display: none;
}
```
3. 在JavaScript中添加事件监听器,当确认密码输入框失去焦点时,检验两次密码输入是否相同:
```javascript
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirmPassword");
var error = document.getElementById("error");
confirmPassword.addEventListener("blur", function () {
if (password.value !== confirmPassword.value) {
error.innerHTML = "两次输入的密码不相同";
error.style.display = "inline";
} else {
error.style.display = "none";
}
});
```
以上代码会在确认密码输入框失去焦点时,判断两次密码输入是否相同,如果不相同则显示错误信息,否则隐藏错误信息。
阅读全文