原生JavaScript DOM表单文件验证失效，表单无验证即可提交

问题原因 #

你的代码核心漏洞在于：当用户选择的文件不符合格式（非.pdf）或大小超过限制时，仅显示错误提示但未返回false阻止表单提交，导致表单直接绕过验证提交。此外，扩展名判断未处理大小写（如.PDF会被判定为不符合），也存在体验瑕疵。

修复后的完整代码 #

document.addEventListener('DOMContentLoaded', function(){
    function validate(e){
        // 先阻止默认提交行为，验证通过后再手动提交
        e.preventDefault();
        var pTagMsg = document.querySelector('#ptagmsg');                    
        var inpsText = document.querySelectorAll('.textinputs');
        var inpFile = document.querySelector('#upload');
        var regForm = document.querySelector('.regform');
        let isValid = true;

        // 文本字段验证
        for(let i = 0; i < inpsText.length; i++){
            // 去除首尾空白后判断长度，避免空格绕过验证
            let fieldValue = inpsText[i].value.trim().length;
            if(fieldValue === 0){                
                inpsText[i].focus();
                inpsText[i].style.backgroundColor = 'red';
                isValid = false;
                // 若要快速定位第一个空字段，可直接return false，注释掉下面的if(!isValid)
                // return false;
            } else {
                inpsText[i].style.backgroundColor = 'green';
            }
        }
        if(!isValid) return false;

        // 文件字段验证
        var fileObjList = inpFile.files;
        var sizeLimit = 300; // 限制大小（KB）
        if(fileObjList.length === 0){
            pTagMsg.textContent = "必须上传附件";
            pTagMsg.style.backgroundColor = 'red';
            inpFile.style.borderColor = 'red';
            return false;
        } 
        
        var fileObj = fileObjList[0];
        var fileName = fileObj.name;
        // 转为小写后取后缀，兼容.PDF、.Pdf等大小写情况
        var fileExt = fileName.toLowerCase().slice(-4);
        var fileSize = Math.round(fileObj.size / 1024);
        
        inpFile.style.borderColor = ''; // 重置边框样式
        if(fileExt === '.pdf' && fileSize <= sizeLimit){
            pTagMsg.textContent = `文件验证通过: ${fileExt}, ${fileSize}KB`;
            pTagMsg.style.backgroundColor = 'green';
            // 所有验证通过，手动提交表单
            regForm.submit();
        } else {
            pTagMsg.textContent = `文件格式必须为PDF，且大小不超过${sizeLimit}KB！当前文件：${fileExt}, ${fileSize}KB`;
            pTagMsg.style.backgroundColor = 'red';
            inpFile.style.borderColor = 'red';
            return false;
        }
    }
    var regForm = document.querySelector('.regform');
    regForm.addEventListener('submit', validate);
});

关键修改点 #

1. 阻止默认提交：添加e.preventDefault()，避免验证未完成时表单直接提交
2. 补全阻止逻辑：在文件验证不通过的分支添加return false，彻底拦截提交
3. 优化文本验证：用trim()去除首尾空白，避免空格绕过空字段检查
4. 兼容大小写：扩展名转为小写后判断，支持.PDF等格式
5. 增强错误提示：给文件输入框添加红色边框，更直观提示错误

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