使用JavaScript校验HTML表单时非空用户名无法提交的问题求解

问题原因 #

• 你的代码中e.preventDefault()被放在了判断逻辑的外部，只要触发表单提交事件，就会无条件阻止表单的默认提交行为，因此就算用户名不为空，表单也无法正常提交。

修复方案 #

把e.preventDefault()移动到用户名为空的判断分支内部即可，仅在校验不通过的时候阻止提交，校验通过后就会触发原生的表单提交逻辑。

修正后的JS代码 #

let userName = document.getElementById('uname');
let form = document.querySelector('#myForm');
form.addEventListener('submit',function(e){
    if(userName.value === ''){
        e.preventDefault(); // 仅校验失败时阻止提交
        alert('user name is required');
    }
});

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