如何修改JavaScript表单验证函数 实现密码不足8位时返回提交错误

问题定位 #

校验逻辑失效的核心原因是密码字段的判断条件写反了：

• 原有判断document.register.psw.value.length > 7的逻辑是：当密码长度大于7位时弹出报错、拦截提交
• 这就导致0~7位的短密码/空密码完全不会触发拦截，反而符合要求的8位及以上密码会被错误拦截
• 附带两个小问题：原密码提示文案单复数错误、描述不清晰；服务条款选项的提示文案存在拼写错误（accpeted应为accepted）

修正后的完整代码 #

只需要把密码校验的判断运算符从>改成<，同时优化提示文案即可，修正后的validateForm()函数如下：

function validateForm() {
    if (document.register.firstName.value == "") {
        alert("Please provide your first name!");
        document.register.firstName.focus();
        return false;
    }
    if (document.register.secondName.value == "") {
        alert("Please provide your second name!");
        document.register.secondName.focus();
        return false;
    }
    if (document.register.email.value == "") {
        alert("Please provide your Email!");
        document.register.email.focus();
        return false;
    }
    if (document.register.phoneNo.value == "") {
        alert("Please provide your Phone Number!");
        document.register.phoneNo.focus();
        return false;
    }
    if (document.register.Gender.value == "") {
        alert("Must select a Gender!");
        document.register.Gender.focus();
        return false;
    }
    if (document.register.Terms.value == "") {
        // 修正原拼写错误
        alert("Terms and Conditions must be accepted");
        document.register.Terms.focus();
        return false;
    }
    // 修正判断条件：长度小于8位时拦截，优化提示文案
    if (document.register.psw.value.length < 8) {
        alert("Password must be at least 8 characters long!");
        document.register.psw.focus();
        return false;
    }
    return true;
}

生效逻辑说明 #

修改后密码字段的校验规则完全符合需求：

• 密码长度为0（空输入）、1~7位时，都会弹出对应提示、自动聚焦到密码输入框、拦截表单提交
• 密码长度≥8位时，密码校验通过，可正常走后续提交流程

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