表单校验功能正常但输入错误内容时仍会提交，该如何修复？

存在的错误点 #

• 校验逻辑返回值完全写反：手机号重复、长度不符合的错误场景下，仅弹出提示未返回false阻止提交；反而校验通过的分支返回了false，会导致正常输入也无法提交
• 按钮的onclick事件没有接收返回值，就算校验函数返回了false，也无法触发浏览器阻止默认提交的行为
• 表单字段调用存在兼容风险：JS里用form.phonenum取值，但input的name属性是myinput，部分浏览器只能通过name属性获取表单字段，会导致取值失败
• 提交按钮上多余的href="/"属性是无效属性，button元素不需要配置href

修复后代码 #

JavaScript代码 #

function check(form) {
    // 校验手机号是否已被使用
    if (form.phonenum.value == "0807575566464" || form.phonenum.value == "09057487463") {
        alert("该手机号已被使用，请更换后重试！")
        // 错误场景返回false阻止提交
        return false;
    } 
    // 校验手机号长度
    else if (form.phonenum.value.length !== 11) { 
        alert("手机号必须为11位，且应以080、081、070、090、091开头");
        return false;
    } 
    // 校验通过允许提交
    else {
        return true;
    }
}

HTML代码 #

<form action='' method='POST' enctype="multipart/form-data" id="formName">
  <!-- 把name改成phonenum和JS取值逻辑匹配 -->
  <input type="text" id="phonenum" name="phonenum">
  <!-- onclick加return接收函数返回值，删除无效的href属性 -->
  <button type='submit' onclick="return check(this.form)">提交</button>
</form>

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