JavaScript表单验证后弹窗失效，点击提交页面刷新问题求助

核心问题分析 #

页面点击提交就刷新，是因为JS脚本没正确绑定表单提交事件，再加上代码里的拼写、逻辑错误，导致e.preventDefault()根本没执行，表单走了默认提交流程。

具体修复步骤 #

1. 调整脚本加载位置 #

你把JS脚本放在了<head>里，这时候页面DOM还没加载完，document.getElementById拿不到表单、输入框这些元素，提交事件监听等于白加。

修改方法：
把<script src="JAVASCRIPT.js" type="text/jsx"></script>从<head>里删掉，移到</body>标签的最前面（Bootstrap那几个脚本之后），同时去掉type="text/jsx"（你写的是普通JS，不是React的JSX）：

<!-- 保留原Bootstrap脚本 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- 移到这里 -->
<script src="JAVASCRIPT.js"></script>

2. 修正JS代码的错误 #

你的JS里有好几处低级错误，直接导致验证失效：

• documet拼写错了，应该是document
• isValid == false是比较，不是赋值，得改成isValid = false
• 判断手机号是否为数字时，你拿元素本身Cp_num去判断，应该用Cp_num.value（输入框的内容）
• 手机号长度判断逻辑错了，要检查是否等于11位，不是只判断>=12

修正后的完整JS代码：

const Cp_num = document.getElementById('Cp_Number')
const age = document.getElementById('Age')
const form = document.getElementById('form')

form.addEventListener('submit', (e) => {
    let isValid = true;
    e.preventDefault(); // 阻止表单默认刷新行为

    // 手机号验证：必须是11位纯数字
    const phoneVal = Cp_num.value.trim();
    if (!phoneVal || isNaN(phoneVal) || phoneVal.length !== 11) {
        alert("手机号必须是11位数字！");
        isValid = false;
    }

    // 年龄验证：非空且为有效数字
    const ageVal = age.value.trim();
    if (!ageVal || isNaN(ageVal)) {
        alert("年龄必须是有效数字！");
        isValid = false;
    }

    if (isValid) {
        popUp(); // 验证通过执行你的弹窗逻辑
    }
})

3. 可选优化（体验提升） #

把手机号输入框的type="text"改成type="tel"，这样移动端打开时会自动弹出数字键盘，用户输入更方便：

<input id="Cp_Number" type="tel" class="form-control" placeholder="Enter Cellphone Number..." required>

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