满足验证要求后表单仍无法提交的技术问题

你的代码里存在一个关键问题：初始化errors数组时给了默认值[""]，这意味着不管有没有验证错误，errors.length始终大于0，导致event.preventDefault()一直被执行，表单永远无法提交。

修复步骤： #

1. 将errors初始化为空数组[]，只有验证不通过时才添加错误信息
2. 移除注释里多余的强制提交代码，只要不阻止默认行为，表单会自动提交

修复后的代码：

const uid = document.getElementById("userId")
const fname = document.getElementById("fname")
const lname = document.getElementById("lname")
const birthday = document.getElementById("date")
const form = document.getElementById("form")

form.addEventListener("submit", event => {
    let lowerCase = /[a-z]/g
    let upperCase = /[A-Z]/g
    let errors = [] // 改为空数组初始化
    // 修正长度判断逻辑，和提示的"8-12字符"保持一致
    if (uid.value.length < 8 || uid.value.length > 12) {
        errors.push("Error in Length")
        alert("User ID must be between 8 and 12 characters")
    }
    if (!(uid.value.match(lowerCase))) {
        errors.push("Error in character case")
        alert("User ID must contain at least 1 lowercase letter")
    }
    if (!(uid.value.match(upperCase))) {
        errors.push("Error in character case")
        alert("User ID must contain at least 1 Uppercase letter")
    }
    // 只有存在错误时才阻止表单提交
    if (errors.length > 0) {
        event.preventDefault()
    }
});

额外优化建议： #

多次弹出alert会干扰用户操作，建议收集所有错误后一次性提示，示例如下：

if (errors.length > 0) {
    event.preventDefault()
    alert("表单验证失败：\n" + errors.join("\n"))
}

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