我正在测试一段JavaScript代码，用于验证带有确认邮件的邮箱表单。当我在确认邮件字段中输入内容时，即使只输入一个与邮箱字段相同的字符（无论是否符合正则表达式），该字段也会保持“成功”状态。我希望实现的效果是：如果邮箱字段无效，则确认邮件字段不应转为“成功”模式，而应等待邮箱验证通过后再继续进行验证。谢谢您的帮助。
HTML代码：
<form id="signup" class="form">
<div class="form-field">
<label for="mail">邮箱：</label>
<input type="email" name="mail" id="mail" autocomplete="off">
<small></small>
</div>
<div class="form-field">
<label for="confirm-mail">确认邮箱：</label>
<div class="form-field input-group">
<input type="email" name="confirm-mail" id="confirm-mail" autocomplete="off">
<small></small>
</div>
</div>
<div class="form-field">
<input class="btn" type="submit" value="注册">
</div>
</form>
JavaScript代码：
const mail = document.querySelector('#mail');
const confirmMail = document.querySelector('#confirm-mail');
const form = document.querySelector('#signup');
// 显示错误消息函数
const showError = (input, message) => {
const formField = input.parentElement;
formField.classList.remove('success');
formField.classList.add('error');
const error = formField.querySelector('small');
error.textContent = message;
};
// 显示成功消息函数
const showSuccess = (input) => {
const formField = input.parentElement;
formField.classList.remove('error');
formField.classList.add('success');
const error = formField.querySelector('small');
error.textContent = '';
};
// 检查输入字段非空函数
const isRequired = (value) => value === '' ? false : true;
// 验证邮箱地址是否有效的函数
const isMailValid = (mail) => {
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(mail);
};
// 验证邮箱字段函数
const checkMail = () => {
let valid = false;
const mailVal = mail.value.trim();
if (!isRequired(mailVal)) {
showError(mail, '邮箱不能为空。');
} else if (!isMailValid(mailVal)) {
showError(mail, '邮箱格式不正确。')
} else {
showSuccess(mail);
valid = true;
}
return valid;
};
// 验证确认邮箱字段函数
const checkConfirmMail = () => {
let valid = false;
const confirmMailVal = confirmMail.value.trim();
const mailVal = mail.value.trim();
if (!isRequired(confirmMailVal)) {
showError(confirmMail, '确认邮箱不能为空');
} else if (mailVal !== confirmMailVal) {
showError(confirmMail, '确认邮箱与邮箱不一致');
} else {
if (!isMailValid(mailVal)) { // 添加对邮箱主字段验证的依赖
showError(confirmMail, '邮箱格式不正确');
} else {
showSuccess(confirmMail);
valid = true;
}
}
return valid;
};
// 修改提交事件处理程序
form.addEventListener('submit', function (e) {
e.preventDefault();
// 验证表单
let isMailValid = checkMail(),
isConfirmMailValid = checkConfirmMail();
let isFormValid = isMailValid && isConfirmMailValid;
// 如果表单有效则提交给服务器
if (isFormValid) {
}
});
使用这段代码时，如果我在邮箱字段和确认邮箱字段中输入任意相同的字符，确认邮箱字段仍会被视为有效，但实际上它不应该这样。