JS表单提交对象丢失、空提交拦截及错误提示清除问题咨询

修复方案 #

核心逻辑调整说明 #

你原来的代码存在三个可优化点：

• 单个字段校验函数注释了返回值，无法统一判断是否全部校验通过
• 提交逻辑没有先做全量字段校验就直接执行后续操作
• 提交后只重置了表单内容，没有清空错误提示的DOM元素内容，错误使用刷新页面的方式清理提示

修改后完整代码 #

const x = "correct"

// 单个字段校验函数：通过返回true，不通过返回false
function nameValidate(value) {
    const namev = value;
    if (namev.length <= 3) {
        const nameError = "请输入有效的姓名"
        document.getElementById("nameerror").innerHTML = nameError
        return false;
    } else {
        document.getElementById("nameerror").innerHTML = x
        return true;
    }
}

function emailValidate(value) {
    const emailv = value;
    if (emailv.length < 5) {
        const emailError = "请输入有效的邮箱"
        document.getElementById("emailerror").innerHTML = emailError
        return false;
    } else {
        document.getElementById("emailerror").innerHTML = x
        return true;
    }
}

function companyValidate(value) {
    if (value === "") {
        const companyError = "请输入有效的公司名称";
        document.getElementById("companyerror").innerHTML = companyError;
        return false;
    } else {
        document.getElementById("companyerror").innerHTML = x;
        return true;
    }
}

function phoneValidate(value) {
    const phonev = value;
    if ( phonev.length !== 10 ) {
        const phoneError = "请输入10位有效的手机号";
        document.getElementById("phoneerror").innerHTML = phoneError;
        return false;
    } else {
        document.getElementById("phoneerror").innerHTML = x;
        return true;
    }
}

function validate(e) {
    // 获取所有表单字段值
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const company = document.getElementById("company").value;
    const phone = document.getElementById("phone").value;
    const desc = document.getElementById("description").value;
    const project = document.getElementById("project").value;
    const form = document.getElementById("form");

    // 全量校验所有字段
    const validateResult = [
        nameValidate(name),
        emailValidate(email),
        companyValidate(company),
        phoneValidate(phone)
    ]

    // 任意字段校验不通过，直接阻止表单提交
    if (validateResult.includes(false)) {
        e.preventDefault();
        return;
    }

    // 全部校验通过，输出表单对象
    const formData = {name, email, company, phone, desc, project};
    console.log(formData);
    // 此处可继续处理formData，比如调用接口提交数据

    // 重置表单+清空错误提示，无需刷新页面，不会丢失formData数据
    form.reset();
    document.getElementById("nameerror").innerHTML = "";
    document.getElementById("emailerror").innerHTML = "";
    document.getElementById("companyerror").innerHTML = "";
    document.getElementById("phoneerror").innerHTML = "";
}

// 正确绑定表单提交事件，不要给函数加()，否则会提前执行函数
const form = document.getElementById("form");
form.addEventListener("submit", validate, true);

效果说明 #

• 所有字段校验全部通过才会执行后续的表单数据输出逻辑，任意字段不符合规则都会直接阻止提交
• 提交成功后直接清空所有错误提示的DOM内容，不需要刷新页面，表单对象会完整保留在formData变量中，可以正常使用

内容的提问来源于stack exchange，提问作者Gaius G D'cruz