我是javascript新手，目前我正在创建一个注册表格，它将验证手机，手机只接受11个字符和数字。唯一的问题是，每次我点击提交，而不是弹出消息，它会完全刷新我的选项卡。有什么办法解决这个问题吗？
表单代码：
<!doctype html>
<html lang="en">
<head>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="Homepage.html"><img src="USTLogo.png" width="30" height="30" alt="">School</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="Homepage.html">HOME<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<title>Enrollment Form</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS -->
<link href = "design.css" rel = "stylesheet" type="text/css"/>
<script src="JAVASCRIPT.js" type="text/jsx"></script>
</head>
<body>
<h1 class="display-1">Enrollment Form</h1>
<div class="container">
<div class="row">
<!-- empty space on the left side -->
<div class="col-lg-3"></div>
<!-- Main Content -->
<div class="col-lg-6">
<div id ="ui">
<form id = "form" class="form-group">
<div class="row">
<div class="col-lg-8">
<label >Cellphone Number</label>
<input id = "Cp_Number" type="text" class="form-control" placeholder="Enter Cellphone Number..." required>
</div>
<div class="col-lg-4">
<label >Age</label>
<input id = "Age" type="text" class="form-control" placeholder="Enter your age..." required>
</div>
<br>
<div class="row">
<div class="col-lg-6">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<div class="col-lg-6">
<a href="Homepage.html" id="cancel" name="cancel" class="btn btn-primary btn-block" onclick="return confirm('Are you sure you want to cancel the Enrollment?')">Cancel</a>
</div>
</div >
</form>
</div>
</div>
<!-- empty space on the right side -->
<div class="col-lg-3"></div>
</div>
</div>
<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>
</body>
</html>
注意：我将删除表单中的大部分内容，并且只包括需要验证的字段JS代码：
const Cp_num = documet.getElementById('Cp_Number')
const age = document.getElementById('Age')
const form = document.getElementById('form')
form.addEventListener('submit', (e) =>{
var isValid = true;
e.preventDefault();
if(isNaN(Cp_num) || Cp_num.value == null || Cp_num.value == ''){
alert ("Your Cellphone number is invalid!")
isValid == false;
}
if (Cp_num >=12){
alert ("Your Cellphone number is invalid!")
isValid == false;
}
if(isNaN(age) || age.value == null || age.value == ''){
alert ("Your Age is invalid!")
isValid == false;
}
if (isValid == true){
popUp();
}
})
停止在head标记中使用自定义javascript。因为，脚本在内容之前加载，并且在初始化之前没有在DOM中找到表单元素。因此，在body标记内部和所有html元素下方使用任何自定义javascript。但请记住，在自定义脚本之前要包含任何其他依赖项。希望它能解决问题。
这里发生的事情是您的脚本标记在您的脑海中：
<script src="JAVASCRIPT.js" type="text/jsx"></script>
由于这个原因，您的HTML还没有完全加载，所以；形式"；id为"的元素；形式"；不存在，因此，您会收到一个错误(请在浏览器中检查控制台(。
这就是e.preventDefault((方法不起作用的原因。因为你的HTML还没有加载。
您有两种选择：
- 将脚本标记放在身体底部：
非常不言自明，将script标记放在正文的末尾，这样就可以先加载整个HTML，然后加载JavaScript文件。
- 使用；推迟"；脚本标记中的属性：
我不会在这里详细解释defer的作用，但如果你想要一些快速的答案，它基本上是在使用任何JavaScript代码之前等待HTML完全加载。
所以你可以试试这个：
<script src="JAVASCRIPT.js" type="text/jsx" defer></script>
(顺便说一句，这种方法不需要将脚本标记从HTML头中移出(
您可以在此处了解有关defer的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-推迟
(EDIT(：通过进一步检查代码，我发现您正在使用"；类型"；参数。您不需要这个，这会导致脚本标记未被使用的问题：
因此来自：
<script src="JAVASCRIPT.js" type="text/jsx"></script>
do:
<script src="JAVASCRIPT.js" defer></script>
(另一个明白了(你在第一个"；文件"；您选择的：
const Cp_num = documet.getElementById('Cp_Number')
"documet"；未定义，您必须将其更改为：
const Cp_num = document.getElementById('Cp_Number')