JavaScript表单手机号正则验证不生效问题求助

问题现象 #

• 开发披萨订购网页课程作业的表单录入、提交校验功能时，姓名、邮箱字段校验可正常触发，但手机号校验始终不生效：输入不符合规则的手机号后点击提交，表单会直接通过校验。
• 已为手机号编写匹配10位纯数字的正则校验规则（已知规则未覆盖极端边界场景），但该校验逻辑完全不触发。
• 存在异常特征：如果将手机号校验代码块移动到姓名校验代码块之前，手机号校验即可正常运行。

关联代码 #

JavaScript校验逻辑 #

function validateForm(){
    
    
    // 姓名校验
    var name = document.getElementById("name").value;
    if(name=="" || !(/^[a-zA-Z ]+$/.test(name))){
        document.getElementById("name_error").innerHTML = "   Invalid Username";
        return false
    }


    // 邮箱校验
    var email = document.getElementById("em").value;
    var atposition=email.indexOf("@");  
    var dotposition=email.lastIndexOf(".");  
    if (email=="" || atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){  
        document.getElementById("email_error").innerHTML = "   Invalid Email"; 
        return false;   
    }  


    // 手机号校验
    var phno = document.getElementById("pno").value;
    if(phno == "" || !(/^[0-9]{10}$/.test(phno))){
        document.getElementById("phone_error").innerHTML = "   Invalid phone number";
        return false;
    }

    
}

HTML页面结构 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form name="form1" onsubmit = "return validateForm()">
        <fieldset>
            <legend>personal details</legend>
            <label for="name">Name:</label><br>
            <input type="text" name="Name" id="name"><span id="name_error"></span><br>
            <label for="em">Email:</label><br>
            <input type="text" name="e-mail" id="em" ><span id="email_error"></span><br>
            <label for="pno">Phone No.:</label><br>
            +91<input name="Phone Number" id="pno" maxlength="10"><span id="phone_error"></span><br>
        </fieldset>

        <fieldset>
            <legend>select pizza</legend>
            <input type="radio" id="simply_veg" name="select_pizza" value="Simpy Veg"><label for="simply_veg">Simply Veg</label><br>
            <input type="radio" id="veg_sup" name="select_pizza" value="Veg Supreme"><label for="veg_sup">Veg Supreme</label><br>
            <input type="radio" id="veg_del" name="select_pizza" value="Veg Delight"><label for="veg_del">Veg Delight</label><br>
            <div name="piz_not_sel"></div>
        </fieldset>

        <fieldset>
            <legend>select pizza size</legend>
            <input type="radio" id="pers_pan" name="select pizza size"><label for="pers_pan">Personal Pan</label><br>
            <input type="radio" id="med" name="select pizza size"><label for="med">Medium</label><br>
            <input type="radio" id="lar" name="select pizza size"><label for="lar">Large</label><br>
        </fieldset>

        <fieldset>
            <legend>select crust</legend>
            <input type="radio" id="thin" name="select crust"><label for="thin">Thin</label><br>
            <input type="radio" id="norm" name="select crust"><label for="norm">Normal</label><br>
            <input type="radio" id="spec" name="select crust"><label for="spec">Special</label><br>
        </fieldset>
            
        <fieldset>
            <legend>select payment option</legend>
            <label for="pay_opn">Choose a car:</label>
            <select id="pay_opn" name="pay_opn" required>
                <option value="COD">COD</option>
                <option value="Debit Card">Debit Card</option>
                <option value="Credit Card">Credit Card</option>
                <option value="UPI">UPI</option>
            </select><br>
        </fieldset>

        <fieldset>
            <legend>promo code</legend>
            <label for="code">Please enter code if any   </label><textarea id="code" name="code" rows="1" cols="9" maxlength="9" placeholder="PIZDIS090"></textarea><br>
        </fieldset>

        <fieldset>
            <legend>Terms and Conditions</legend>
            <input type="checkbox" id="tnc" name="termncond"><label for="tnc">I agree to the Terms and Conditions</label> 
        </fieldset>     
        
        <input type="submit" value="submit"><input type="reset">
        <div id="otpt"></div>
        
    </form>
    <script src="pizza_validate.js">
        
    </script>
</body>
</html>

问题根因 #

故障点在邮箱校验逻辑段：

• 邮箱校验的判断条件中写了dotposition+2>=x.length，但整个代码中从未定义过变量x。
• 代码执行到这一行时，会触发ReferenceError（引用未定义变量）的JavaScript运行时错误，validateForm函数会直接中断执行，写在后面的手机号校验逻辑根本没有运行机会，自然不会生效。
• 把手机号校验移到姓名校验之前能正常运行的原因也很明确：此时手机号校验逻辑在报错的邮箱校验代码之前，会先执行完成，不会被后续的运行时错误打断。

修复方案 #

将邮箱校验判断条件里的x.length替换为email.length即可，修正后的邮箱校验代码如下：

// 邮箱校验
var email = document.getElementById("em").value;
var atposition=email.indexOf("@");  
var dotposition=email.lastIndexOf(".");  
if (email=="" || atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length){  
    document.getElementById("email_error").innerHTML = "   Invalid Email"; 
    return false;   
}

排查提示：这类代码执行中途中断的问题，可以直接打开浏览器开发者工具的Console面板，未定义变量这类基础运行时错误会直接打印明确的错误信息和报错行号，排查效率很高。另外建议每次触发校验时先清空对应字段的历史错误提示，避免错误提示残留影响体验。

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