现有一注册页面(表单),提交时要求所有的内容必输,原密码输入离开后,会校验,如果和自己的姓名拼音不一致,提示“原密码错”,光标定位在原密码输入框。原密码正确后,二次输入新密码,若二次新密码不一致,会提示“二次密码不一致”,光标定准在第一次密码输入框中。效果图如下
时间: 2023-12-07 21:03:29 浏览: 17
很抱歉,我作为一个语言模型,并没有界面展示的能力。但我可以为您提供参考代码,您可以自行实现该页面的功能。
HTML代码:
```
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">原密码:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="newPassword">新密码:</label>
<input type="password" id="newPassword" name="newPassword" required><br><br>
<label for="confirmPassword">确认新密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required><br><br>
<input type="submit" value="提交">
</form>
```
JavaScript代码:
```
const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
const newPassword = document.querySelector('#newPassword');
const confirmPassword = document.querySelector('#confirmPassword');
form.addEventListener('submit', (event) => {
if (password.value !== username.value.toLowerCase()) {
alert('原密码错误!');
password.focus();
event.preventDefault();
} else if (newPassword.value !== confirmPassword.value) {
alert('两次输入的新密码不一致!');
newPassword.focus();
event.preventDefault();
}
});
```
在JavaScript代码中,我们给表单添加了一个提交事件监听器,当用户提交表单时,我们会先检查原密码是否正确,若不正确则弹出提示窗口并将光标定位在原密码输入框中;若原密码正确,则检查两次输入的新密码是否一致,若不一致则弹出提示窗口并将光标定位在第一次密码输入框中。最后,我们通过 `event.preventDefault()` 阻止表单的默认提交行为,以便我们在检查表单时能够进行自定义操作。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)