css实现,原密码输入离开后,会校验,如果和自己的姓名拼音不一致,提示“原密码错”,光标定位在原密码输入框。原密码正确后,二次输入新密码,若二次新密码不一致,会提示“二次密码不一致”,光标定准在第一次密码输入框中
时间: 2023-12-06 08:03:37 浏览: 35
你的问题是一个前端开发的问题,可以使用JavaScript和CSS来实现。以下是一个简单的实现示例:
HTML代码:
```html
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="old-password">原密码:</label>
<input type="password" id="old-password" name="old-password">
<span id="old-password-error" class="error-message"></span>
<br>
<label for="new-password">新密码:</label>
<input type="password" id="new-password" name="new-password">
<br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password">
<span id="confirm-password-error" class="error-message"></span>
<br>
<button id="submit-button" disabled>提交</button>
```
CSS代码:
```css
.error-message {
color: red;
display: none;
}
.error-message.active {
display: block;
}
```
JavaScript代码:
```javascript
const nameInput = document.getElementById('name');
const oldPasswordInput = document.getElementById('old-password');
const oldPasswordError = document.getElementById('old-password-error');
const newPasswordInput = document.getElementById('new-password');
const confirmPasswordInput = document.getElementById('confirm-password');
const confirmPasswordError = document.getElementById('confirm-password-error');
const submitButton = document.getElementById('submit-button');
nameInput.addEventListener('input', () => {
submitButton.disabled = true;
});
oldPasswordInput.addEventListener('blur', () => {
if (oldPasswordInput.value !== nameInput.value.toLowerCase()) {
oldPasswordError.textContent = '原密码错误';
oldPasswordError.classList.add('active');
oldPasswordInput.focus();
} else {
oldPasswordError.textContent = '';
oldPasswordError.classList.remove('active');
newPasswordInput.focus();
}
});
newPasswordInput.addEventListener('input', () => {
confirmPasswordInput.value = '';
confirmPasswordError.textContent = '';
confirmPasswordError.classList.remove('active');
});
confirmPasswordInput.addEventListener('blur', () => {
if (confirmPasswordInput.value !== newPasswordInput.value) {
confirmPasswordError.textContent = '两次密码不一致';
confirmPasswordError.classList.add('active');
newPasswordInput.focus();
} else {
confirmPasswordError.textContent = '';
confirmPasswordError.classList.remove('active');
submitButton.disabled = false;
}
});
```
这段代码使用了事件监听器来捕捉输入框的输入和失去焦点事件,并使用JavaScript来验证输入框的值。如果验证失败,会在相应的错误信息元素中显示错误消息,并将焦点移回相关的输入框中。如果验证成功,会启用提交按钮。CSS代码用于显示错误信息元素。