请帮我写一个js逻辑判断注册页面的用户,密码,确认密码,邮箱,还有真是姓名必须为汉字
时间: 2023-12-10 09:06:29 浏览: 96
好的,我可以帮您写一个简单的JavaScript逻辑判断注册页面的用户信息。以下是基本的代码示例:
```javascript
// 获取表单元素
const username = document.getElementById('username');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirm-password');
const email = document.getElementById('email');
const realName = document.getElementById('real-name');
// 定义正则表达式
const chineseReg = /^[\u4E00-\u9FA5]+$/; // 匹配汉字
// 定义错误信息
const errors = {
username: '用户名不能为空',
password: '密码不能为空',
confirmPassword: '确认密码不能为空',
email: '邮箱不能为空',
realName: '真实姓名必须为汉字'
};
// 定义验证函数
function validate() {
let isValid = true; // 是否通过验证的标志
// 验证用户名
if (username.value.trim() === '') {
showError(username, errors.username);
isValid = false;
}
// 验证密码
if (password.value.trim() === '') {
showError(password, errors.password);
isValid = false;
}
// 验证确认密码
if (confirmPassword.value.trim() === '') {
showError(confirmPassword, errors.confirmPassword);
isValid = false;
} else if (password.value.trim() !== confirmPassword.value.trim()) {
showError(confirmPassword, '两次输入的密码不一致');
isValid = false;
}
// 验证邮箱
if (email.value.trim() === '') {
showError(email, errors.email);
isValid = false;
}
// 验证真实姓名
if (realName.value.trim() === '') {
showError(realName, errors.realName);
isValid = false;
} else if (!chineseReg.test(realName.value.trim())) {
showError(realName, errors.realName);
isValid = false;
}
return isValid;
}
// 显示错误信息
function showError(input, message) {
const formGroup = input.parentElement; // 获取input的父元素
const error = formGroup.querySelector('.error-message'); // 获取error-message元素
error.innerText = message; // 设置错误信息
formGroup.classList.add('error'); // 添加error类
}
// 监听提交事件
const form = document.getElementById('register-form');
form.addEventListener('submit', event => {
event.preventDefault(); // 阻止表单提交的默认行为
if (validate()) {
form.submit(); // 如果通过验证,则提交表单
}
});
```
上述代码中,我们首先获取了表单中的各个输入框,并定义了一个汉字正则表达式 `chineseReg`,以及一个错误信息对象 `errors`。
然后定义了一个 `validate` 函数,用于验证表单输入的合法性。在该函数中,我们逐个验证了用户名、密码、确认密码、邮箱和真实姓名。如果某个输入框未填写或者输入的内容不符合要求,则通过 `showError` 函数显示错误信息,并返回 false。否则,返回 true。
最后,我们监听了表单的提交事件,并阻止了默认行为。如果通过验证,则提交表单;否则,不提交表单。
阅读全文