如何为表单添加11位手机号格式验证并确保仅合法输入时才跳转？

我来帮你搞定这个手机号验证的问题！你当前的代码里，check函数只检查了特定的几个手机号和空值，完全没验证输入是否是11位数字，这就是为什么不管输入多少位都会跳转到下一页的原因。咱们一步步修改来解决这个问题：

第一步：修改JavaScript验证逻辑 #

更新你的myScript.js里的check函数，加入11位纯数字的格式验证，同时调整逻辑顺序（先检查空值，再验证格式，最后检查是否已注册）：

/* myScript.js */
function check(form) {
    // 先检查是否为空
    if (!form.usercheck1.value || form.usercheck1.value.trim() === "") {
        alert("Please provide your phone number!");
        return; // 终止后续执行
    }

    // 验证是否是11位纯数字
    const phoneRegex = /^[0-9]{11}$/;
    if (!phoneRegex.test(form.usercheck1.value)) {
        alert("Invalid Phone Number Format");
        return; // 终止后续执行
    }

    // 检查手机号是否已被使用
    if (form.usercheck1.value === "1234" || form.usercheck1.value === "12345") {
        alert("An account already exist with this phone number! \nKindly login to continue.");
    } else {
        // 格式正确且未注册，跳转页面
        window.location.replace('https://www.google.com');
    }
}

第二步：优化输入框的输入限制 #

你原来的输入框oninput事件允许输入小数点，这不符合手机号的要求，把它改成只允许输入数字：

<input class="input5" maxlength="11" id="myform_phone" name="usercheck1" 
       oninput="this.value = this.value.replace(/[^0-9]/g, '')" 
       style="font-family: Courgette;" type="text" placeholder="Phone number here..." />

为什么这样修改？ #

• 空值检查：先确保用户输入了内容，避免后续验证出错
• 正则验证：/^[0-9]{11}$/的意思是：从开头到结尾必须是数字，且长度正好是11位，完美匹配你所在国家的手机号规则
• 逻辑顺序：把最基础的验证放在前面，不符合就直接终止函数，避免无效的后续检查
• 输入限制优化：去掉小数点的允许，确保用户只能输入数字，减少格式错误的可能

测试场景验证 #

现在你的表单会正确处理这些情况：

• 空输入 → 提示"Please provide your phone number!"
• 输入非11位数字（比如10位、12位、包含字母）→ 提示"Invalid Phone Number Format"
• 输入已注册的手机号（1234/12345）→ 提示登录
• 输入11位未注册的数字 → 跳转到目标页面

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