每次我在字段中输入数据并单击提交时，页面都会刷新，清除表单，而不是输入外部Javascript文件。但是当我将按钮类型更改为"按钮"而不是"提交"时，除了"必需"弹出窗口不再显示外，一切都很顺利。单击提交类型按钮时调用外部脚本的最佳做法是什么？
网页文件
<!DOCTYPE html>
<html>
<head>
<title>Registration Form 2</title>
<link href="bStrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="style 2.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="col-md-8">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Registration</h1>
</div>
<div class="panel-body">
<!--FORM START-->
<form class="register">
<!--NAME-->
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-6">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row field">
<div class="namefields">
<input type="text" class="form-control" id="fname" placeholder="Enter firstname" required>
<input type="text" class="form-control" id="lname" placeholder="Enter lastname" required>
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Birthday</legend>
<input type="date" class="form-control" id="bday" required>
</fieldset>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<!--EMAIL-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="row field">
<div class="col-md-12">
<input type="email" class="form-control"
id="email" placeholder="Enter email" required>
</div>
</div>
</div>
<!--GENDER-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row field">
<div class="col-md-6">
<label class="radio-inline"><input type="radio" name="gender" checked value="Male">Male</label>
</div>
<div class="col-md-6">
<label class="radio-inline"><input type="radio" name="gender" value="Female">Female</label>
</div>
</div>
</fieldset>
</div>
<!--COUNTRY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Country</legend>
<div class="row field" align="middle" title="Select Country">
<select id="country">
<option selected hidden>Select Country</option>
<optgroup label = "Asia">
<option value="Philippines">Philippines</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
<optgroup label = "Europe">
<option value="Italy">Italy</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
</fieldset>
</div>
<!--SUBMIT-->
<div class="row">
<div class="col-md-5">
</div>
<div class="col-md-2">
<div class="submit">
<button type="submit" class="btn btn-primary" id="sbtn" onClick="validate()">Submit</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>JAVASCRIPT 文件
'函数验证() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var gender = $('input[name="gender"]:checked').val();
var bday = document.getElementById("bday").value;
var country = document.getElementById("country").value;
if (fname=="" || lname=="" || email=="" || country == "Select Country"){
console.log("Incomplete data");
$(".modal-title").text("Incomplete Data");
$(".modal-body").text("Please Fill All Required Fields");
$("#myModal").modal();
}
else{
$(".modal-title").text("Registration Succesful");
$(".modal-body").text("Welcome "+ fname +"! Your data has been inserted.");
$("#myModal").modal();
var info = new Object();
info.firstname = fname;
info.lastname = lname;
info.email = email;
info.gender = gender;
info.country = country;
info.bday = bday;
console.log("Output: " , info);
}
}'
有两种方法可以做到这一点。 我个人喜欢的是将按钮更改为提交类型，并将表单中的onSubmit事件绑定到validate() js函数。
确保在发生错误时取消事件，以便不使用 event.preventDefault() 提交表单
我还不能对事情发表评论，所以让我发布一个答案。
答
我同意程序员的回答，使用onsubmit事件$(...).submit(...) in jQuery，然后使用event.preventDefault().
阐述
详细说明(如果我错了，请纠正我)，您的表单在单击按钮时"刷新"页面的原因是，由于单击按钮时按钮type='submit'，因此它会提交表单。
表单实际上并没有刷新(这就是我之前使用引号的原因)。它尝试将某个HTTP方法运行到某个路由(就像提交时的HTML表单一样)。默认情况下，它会尝试运行 GET 方法，以便将您带到该路由。
因此，event.preventDefault()实际上是在阻止这种行为发生，因此为什么程序员的答案有效。
更多信息
查找 HTTP 方法和 HTTP 动词以真正了解表单的工作原理。我无法为您提供自动取款机的链接。
希望有帮助/有意义。