现有一注册页面(表单),提交时要求所有的内容必输,原密码输入离开后,会校验,如果和自己的姓名拼音不一致,提示“原密码错”,光标定位在原密码输入框。原密码正确后,二次输入新密码,若二次新密码不一致,会提示“二次密码不一致”,光标定准在第一次密码输入框中。javaScript
时间: 2023-12-07 20:03:29 浏览: 137
好的,下面是一个简单的 JavaScript 代码实现:
```javascript
// 获取表单元素
const form = document.querySelector('#register-form');
const nameInput = document.querySelector('#name');
const originalPwdInput = document.querySelector('#original-pwd');
const newPwdInput = document.querySelector('#new-pwd');
const confirmPwdInput = document.querySelector('#confirm-pwd');
// 绑定表单提交事件
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 校验所有的表单字段是否填写
if (nameInput.value.trim() === '' || originalPwdInput.value.trim() === '' || newPwdInput.value.trim() === '' || confirmPwdInput.value.trim() === '') {
alert('请填写所有的表单字段');
return;
}
// 校验原密码是否正确
if (originalPwdInput.value.trim() !== getPinyin(nameInput.value.trim())) {
alert('原密码错误');
originalPwdInput.focus();
return;
}
// 校验两次输入的密码是否一致
if (newPwdInput.value.trim() !== confirmPwdInput.value.trim()) {
alert('两次输入的密码不一致');
newPwdInput.focus();
return;
}
// 提交表单
form.submit();
});
// 获取姓名的拼音
function getPinyin(name) {
// 这里可以调用你的获取拼音的函数
// 比如:return pinyin(name);
}
```
在代码中,我们首先获取了表单元素和各个表单字段的输入框元素,然后绑定了表单提交事件。在表单提交事件处理函数中,我们首先校验了所有的表单字段是否填写,如果有任何一个字段为空,则弹出提示并返回。接着,我们校验了原密码是否正确,如果不正确,则弹出提示,并将光标定位在原密码输入框中。最后,我们校验了两次输入的新密码是否一致,如果不一致,则弹出提示,并将光标定位在第一次密码输入框中。如果所有的校验都通过,则提交表单。
阅读全文