JavaScript邮箱表单验证问题：主邮箱无效时确认框仍显示成功

当前代码存在的问题：当主邮箱不符合正则验证规则时，只要确认邮箱输入的内容和主邮箱一致（哪怕只是单个字符），确认邮箱字段就会进入success状态。需要调整逻辑，只有主邮箱验证通过后，确认邮箱才允许进入success状态。

修改后的完整代码 #

HTML（无需改动）

<form id="signup" class="form">
    <div class="form-field">
        <label for="mail">Mail:</label>
        <input type="mail" name="mail" id="mail" autocomplete="off">
        <small></small>
    </div>
    <div class="form-field">
        <label for="confirm-mail">Confirm Mail:</label>
        <div class="form-field input-group">
            <input type="mail" name="confirm-mail" id="confirm-mail" autocomplete="off">
            <small></small>
        </div>
    </div>
    <div class="form-field">
        <input class="btn" type="submit" value="Sign Up">
    </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.trim() !== '';

// 验证邮箱格式
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, 'Email cannot be blank.');
    } else if (!isMailValid(mailVal)) {
        showError(mail, 'Email is not valid.')
    } else {
        showSuccess(mail);
        valid = true;
    }
    return valid;
};

// 验证确认邮箱（核心修改）
const checkConfirmMail = () => {
    let valid = false;
    const confirmMailVal = confirmMail.value.trim();
    const mailVal = mail.value.trim();
    // 先检查主邮箱是否有效
    const isMainMailValid = checkMail();

    if (!isRequired(confirmMailVal)) {
        showError(confirmMail, 'Confirm Email is required');
    } else if (!isMainMailValid) {
        showError(confirmMail, 'Please enter a valid main email first');
    } else if (mailVal !== confirmMailVal) {
        showError(confirmMail, 'Confirm Email does not match');
    } else {
        showSuccess(confirmMail);
        valid = true;
    }

    return valid;
};

// 提交事件处理
form.addEventListener('submit', function (e) {
    e.preventDefault();
    const isMailValid = checkMail();
    const isConfirmMailValid = checkConfirmMail();
    const isFormValid = isMailValid && isConfirmMailValid;

    if (isFormValid) {
        // 这里添加表单提交逻辑
        console.log('Form submitted successfully');
    }
});

// 添加实时验证监听，提升用户体验
mail.addEventListener('input', checkMail);
confirmMail.addEventListener('input', checkConfirmMail);

关键改动说明 #

1. 确认邮箱验证逻辑调整：在checkConfirmMail函数中，先调用checkMail()获取主邮箱的验证状态，只有主邮箱验证通过后，才会继续检查确认邮箱是否匹配；如果主邮箱无效，直接给确认邮箱显示错误提示。
2. 修正提示文案：把原代码中错误的"Confirm Password"文案改成"Confirm Email"，和功能匹配。
3. 添加实时验证：给两个输入框添加input事件监听，用户输入时实时触发验证，及时反馈状态。
4. 优化isRequired函数：原函数判断逻辑有问题，改成检查value.trim() !== ''，避免空格被误判为有效输入。

内容的提问来源于stack exchange，提问作者mauror76