jQuery表单提交校验：已输入内容仍触发空值/密码过短弹窗问题

你把输入值读取的逻辑写在了submit事件监听的外层，这部分代码会在页面刚加载完成时就执行，此时输入框还没有任何用户输入，三个变量Text1、Password1、passwordLength存的永远是页面初始状态的空值、长度0。后续用户在输入框填写内容时，这三个变量不会自动更新，提交表单时校验用的还是初始的空值，所以不管你填什么都会触发提示。

• 把所有读取输入值的逻辑移到submit事件的回调函数内部，保证每次触发提交时，读取的都是用户当前输入的最新内容
• 校验不通过时调用e.preventDefault()阻止表单默认的跳转提交行为
• 补充输入内容首尾空格过滤，避免用户输入全空格绕过非空校验
• 非空校验不通过时直接终止后续逻辑，不需要重复触发密码长度校验

修正后的完整JS代码如下，原HTML结构无需修改，替换原有JS代码即可正常运行：

<script>
$('form').on('submit', function(e) {
    // 提交时实时获取输入内容，同时过滤首尾空格
    var Text1 = $('#id').val().trim();
    var Password1 = $('#pw').val().trim();
    var passwordLength = Password1.length;

    if (Text1 == '' || Password1 == '') {
        alert('Fill in the blank');
        e.preventDefault();
        return;
    }

    if (passwordLength < 6){
        alert('Enter the password with at least 6 characters');
        e.preventDefault();
    }
})
</script>

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