Javascript 不使用PHP的HTML验证JS
我提出了一份申请，让人们填写一份申请表。我做了一些表单内验证，但现在我想确保当用户点击提交按钮时，它会检查以确保所有字段都已填写。我被卡住了，弄不清这个谜题的最后一部分 我相信我所需要做的就是一个Application.js，如果有人能看看这个，让我知道如果我遗漏了什么。我没有包括CSS表或照片。谢谢你花时间帮忙 这是表格。“Application.html”Javascript 不使用PHP的HTML验证JS,javascript,html,Javascript,Html,我提出了一份申请，让人们填写一份申请表。我做了一些表单内验证，但现在我想确保当用户点击提交按钮时，它会检查以确保所有字段都已填写。我被卡住了，弄不清这个谜题的最后一部分 我相信我所需要做的就是一个Application.js，如果有人能看看这个，让我知道如果我遗漏了什么。我没有包括CSS表或照片。谢谢你花时间帮忙 这是表格。“Application.html” 您不能只在JavaScript上检查数据，还应该在服务器端检查数据，因为客户端更容易访问，用户可以更改JavaScript甚至禁用它，因
您不能只在JavaScript上检查数据，还应该在服务器端检查数据，因为客户端更容易访问，用户可以更改JavaScript甚至禁用它，因此数据将无效 您还应该编写服务器端验证 您忘记显示Application.js文件 您还可以使用HTML5验证，无需使用任何JavaScript：
您可以使用jQuery“表单验证插件”来代替编写自己的javascript验证，这是一个非常好的工具，用于web页面使用javascript在客户端验证数据条目。它使用起来非常简单。 这是一个示例教程
您还应该实施服务器端验证以获得最佳安全性。然后他可以使用noscript。引入Javascript是因为人们已经厌倦了等待30秒服务器端的验证响应，声明用户名或电子邮件无效。@Volter9我没有Application.js，这是我想知道的问题。不幸的是，我现在无法使用服务器端。@Lakshayarora他将如何使用脚本进行验证？JavaScript被关闭，如果JavaScript被关闭，noscript只是为了显示一些东西。@Lakshayarora总是，总是检查服务器端。使用开发人员工具，删除表单上的验证侦听器并提交潜在的内容大约需要2秒钟。“一定要检查服务器端以确保安全。”保尔·斯金纳：我已经看过了。您缺少整个验证脚本。请看一看，我相信这是您正在寻找的。正如其他人告诉您的，在服务器端进行验证，并记住您永远不能信任client@Andres这是什么样的形式？还是一个.js？我喜欢我读到的东西，但并不熟悉它所需要的表单类型（css、php、js）。在那个例子中，你会使用你的应用程序表单（它是它的id），它会在表单提交之前调用一个函数来验证它，但如果你出于安全目的这样做，它就不是那么有效了。这到底是如何工作的？我下载了这个插件并查看了它，但它对我来说毫无意义。请查看这个演示和它的来源：）如果它有用，请标记答案
<!DOCTYPE html>
<html>
<head>
<center><h1>AIFC Application Form</h1></center>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<title>AIFC Application</title>
<meta charset="utf-8">
<meta name="author" content="Paul Skinner">
<link rel="stylesheet" type="text/css" href="Application.css" />
<style type="text/css">
</style>
<script src="Application.js"></script>
<script src="Application_Library.js"></script>
<script type="text/javascript">
function updateTotal() {
var basePrice = 50;
var optionsPrice = 0;
var memberPrice = 0;
function checkPayment() {
if (document.getElementById('payment0').checked) {
optionsPrice += 1;
}
if (document.getElementById('payment1').checked) {
optionsPrice += 9.6;
}
} // end of checking for payment
function checkJumper() {
if (document.getElementById('jumper0').checked) {
optionsPrice += 0;
}
if (document.getElementById('jumper1').checked) {
optionsPrice += 4.4;
}
} // end of checking for Jumper
function checkMembership() {
if (document.getElementById('membership').value == 'Basic') {
memberPrice += 75;
}
if (document.getElementById('membership').value == 'Silver') {
memberPrice += 125;
}
if (document.getElementById('membership').value == 'Gold') {
memberPrice += 150;
}
} // end of check membership function
checkPayment();
checkJumper();
checkMembership();
var totalPrice = basePrice + (optionsPrice * memberPrice);
document.getElementById('optionsPrice').innerHTML = optionsPrice;
document.getElementById('memberPrice').innerHTML = "$ " + memberPrice;
document.getElementById('totalPrice').innerHTML = "$ " + totalPrice;
}
</script>
</head>
<body>
<div id="top">
<nav class="horizontalNav">
<ul>
<li><a href="fitness.html">Home</a></li>
<li><a href="application.html">Application</a></li>
<li><a href="WhoWeAre.html">Who We Are</a></li>
<li><a href="Pricing.html">Our Packages</a></li>
</ul>
</nav></div>
<section>
<table>
<tr style="white-space:nowrap; clear:both">
<td><img src="Images/girl punching.jpg" alt="Girl Punching" style=" float:left; height:200px" /></td>
<td><img src="images/fitness.jpg" alt="Weights" style=" float:right; height:200px; width:900px" /></td>
</tr>
</table>
</section>
<form action="#" method="get" name="application" id="application" >
<div id="form">
<fieldset>
<legend>Payment Type</legend><br>
<input type="radio" name="payment" id="payment0" value="payment0" onchange="updateTotal()"> Monthly membership <br>
<input type="radio" name="payment" id="payment1" value="payment1" onchange="updateTotal()"> Yearly membership <b>Big Savings!</b> <br><br>
</fieldset>
<fieldset>
<legend>Choose a Location</legend><br>
<input type="radio" name="jumper" id="jumper0" value="jumper0" onchange="updateTotal()"> Single Gym location
<input type="radio" name="jumper" id="jumper1" value="jumper1" onchange="updateTotal()"> All Locations <br><br>
</fieldset>
<fieldset>
<legend>Membership Type</legend><br>
<select name="membership" id="membership" onchange="updateTotal()">
<option value="Basic">Basic Membership ($75)</option>
<option value="Silver">Silver Membership ($125)</option>
<option value="Gold">Gold Membership ($150)</option><br>
</select>
</fieldset>
<fieldset>
<legend>Sex</legend><br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
</fieldset>
</div>
<div id="prices">
<table>
<tr><td>Membership Application Fee</td><td id="basePrice">$50</td></tr>
<tr><td>Option factor</td><td id="optionsPrice"></td></tr>
<tr><td>Membership</td><td id="memberPrice"></td></tr>
<tr><td>Total</td><td id="totalPrice"></td></tr>
</table>
</div>
<div id="info">
<fieldset>
<legend>Personal Information</legend>
<label for="first_name">First Name:</label>
<input type="text" id="firstname" name="first" required autofocus title="First Name" placeholder="First Name" />
<span id="first_name_error"> </span><br>
<label for="last_name">Last Name:</label>
<input type="text" id="lastname" name="last" required title="Last Name" placeholder="Last Name"/>
<span id="last_name_error"> </span><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required title="Address" placeholder="Address"/>
<span id="address_error"> </span><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" required title="City" placeholder="City"/>
<span id="city_error"> </span><br>
<label for="state">State:</label>
<input type="text" id="state" maxlength="2" name="State" required title="State" placeholder="State"/>
<span id="state_error"> </span><br>
<label for="zip_code">Zip Code:</label>
<input type="text" id="zip" name="zip" required title="Zip Code" placeholder="Zip Code" pattern="\d{5}([\-]\d{4})?"/>
<span id="zip_error"> </span><br>
<label for="phone_number">Phone Number:</label>
<input type="text" id="phone" name="phone" required title="Optional Phone Number 999-999-9999" placeholder="999-999-9999" pattern="\d{3}[\-]\d{3}[\-]\d{4}"/>
<span id="phone_error"> </span><br>
<label for="date_of_birth">Date of Birth:</label>
<input type="date" name="date" required title="MM-DD-YYYY"/>
<span id="date_error"> </span><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required title="Email" placeholder="Email Address"/>
<span id="email_error"> </span>
<br>
</fieldset>
<br><br><center><input type="submit" id="submit" value="Become a Member"></center>
<br><center><input type="Reset" id="btn1" value="Reset Form"></center>
</div>
<br><br><div class="footer">
<address><center>
<b>American InterContinental Fitness Center</b> ☀
1578 Perseverance Lane ☀
Simple City, IL 60001
<br/> (630)432-1425
</address></center>
<br>
</div>
</form>
</body>
</html>
var $ = function (id) { return document.getElementById(id); }
var application = function () {
// All the different fields
this.field = [];
this.field["first_name"] = {};
this.field["last_name"] = {};
this.field["address"] = {};
this.field["city"] = {};
this.field["state"] = {};
this.field["zip"] = {};
this.field["phone"] = {};
this.field["date"] = {};
this.field["email"] = {};
// Field messages
this.field["state"].message = "Please use only a two letter State abbreviation.";
this.field["zip"].message = "Please use a 5 or 9 digit Zip Code";
this.field["phone"].message = "Please use 123-456-7890 format.";
this.field["email"].message = "Must be a vaild email address.";
// Error messages
this.field["email"].required = "Email is required";
this.field["confirmemail"].required = "Please confirm your email!";
this.field["confirmemail"].noMatch = "Emails do not Match!", "email";
this.field["first_name"].required = "First names are required.";
this.field["last_name"].required = "Last names are required.";
this.field["address"].required = "An Address is required";
this.field["city"].required = "A City is required";
this.field["state"].required = "A State is required";
this.field["state"].isState = "State invalid";
this.field["zip"].required = "A Zip code is required.";
this.field["zip"].isZip = "Zip code is invalid";
this.field["phone"].required = "A phone number is required";
this.field["phone"].isPhone = "The phone number is invalid";
this.field["date"].required = "Your date of birth is required";
}