JavaScript表单文件上传校验时return false不生效问题求助

问题排查与修复方案 #

核心问题1：事件绑定未接收返回值 #

你在按钮onclick属性中仅调用了func()，函数返回的false没有传递给点击事件，导致无法阻止默认提交行为，需要修改为onclick="return func()"。

核心问题2：submit按钮内部嵌套<a>标签逻辑冲突 #

<button type="submit">本身会触发表单提交行为，内部嵌套的<a>标签又会触发跳转，二者逻辑完全冲突，会导致校验逻辑还未生效就触发跳转/提交。需要移除按钮内的<a>标签，如果需要跳转到指定页面，可以在校验通过后通过JS实现跳转。

问题3：文件上传判断逻辑不严谨 #

jobs.value < 1的写法不可靠，文件选择框的value是字符串类型，正确的判断方式是检查files属性的长度：if(jobs.files.length === 0)，同时还可以补充判断文件类型是否为图片。

问题4：setTimeout自动刷新逻辑不合理 #

5秒后自动刷新页面会清空用户已经填写的其他表单内容，使用体验很差，建议直接移除这段逻辑。

修正后代码示例 #

校验函数

const jobs = document.getElementById("jobImage");
const error = document.getElementById("Error");

function func(){
    // 判断是否未选择文件
    if(jobs.files.length === 0){    
        error.style.display = "block";
        error.textContent = "请上传您的图片";
        return false;
    }
    // 可选：补充校验文件类型是否为图片
    const fileType = jobs.files[0].type;
    if(!fileType.startsWith('image/')){
        error.style.display = "block";
        error.textContent = "请上传有效的图片文件";
        return false;
    }
    // 校验通过后如果需要跳转可在此处添加跳转逻辑
    return true;
}

按钮代码

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <button type="submit" value="Save" class="btn btn-default" id="save" onclick="return func()">提交</button>
    </div>
</div>

可选优化方案 #

更推荐监听表单的submit事件而非按钮的点击事件，可以覆盖按钮点击之外的提交场景（比如回车提交），示例：

// 替换为你实际的表单选择器
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
    if(jobs.files.length === 0){
        error.style.display = "block";
        error.textContent = "请上传您的图片";
        e.preventDefault(); // 阻止默认提交行为
    }
})

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