JavaScript实现联系表单空值校验仅邮箱校验生效如何解决

• trim()方法使用错误：JavaScript中字符串的trim()方法不会修改原字符串，只会返回去除首尾空白后的新字符串，你原来的写法email.trim()没有把处理后的值赋值回变量，等于未做空白过滤。
• 分支逻辑不合理：if...else if是互斥分支，且你在每个判断中直接return false跳出函数，会导致一次校验最多只显示一个错误，多个字段同时为空时只会提示第一个空字段的错误，若邮箱已填写才会走到姓名字段的校验逻辑。
• HTML语法错误：你编写的表单开头多了一个闭合标签<form ...></form>，直接提前关闭了表单，所有input元素实际不属于表单内部，后续提交表单会出现参数丢失的问题，需删掉form标签后多余的</form>。

JavaScript校验代码（已包含info字段校验） #

function contactFormEmpty() {
    // 取值同时去除首尾空白
    const email = document.getElementById('email').value.trim();
    const name = document.getElementById('name').value.trim();
    const info = document.getElementById('info').value.trim();
    // 先隐藏所有历史错误提示，避免上次校验的错误残留
    document.querySelectorAll('.contact--form--error').forEach(errorEl => {
        errorEl.style.display = 'none';
    });
    // 校验结果标记，默认是校验通过
    let formPass = true;

    // 每个字段单独校验，互不影响，多个空字段会同时展示错误提示
    if (email === '') {
        document.getElementById('contact--form--email--error').style.display = 'block';
        formPass = false;
    }
    if (name === '') {
        document.getElementById('contact--form--name--error').style.display = 'block';
        formPass = false;
    }
    if (info === '') {
        document.getElementById('contact--form--info--error').style.display = 'block';
        formPass = false;
    }

    // 所有字段校验通过才返回true，允许表单提交
    return formPass;
}

1. 可以给输入框绑定input事件，用户输入内容时实时隐藏对应字段的错误提示，使用体验更好
2. 邮箱字段可以补充格式校验，用正则判断邮箱格式是否合法，示例正则：/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
3. 尽量不用行内onsubmit绑定事件，改用JS的addEventListener绑定提交事件，实现结构和逻辑分离，更易维护

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