JavaScript 表单验证
在本教程中，您将学习如何使用 JavaScript 验证 HTML 表单。
了解客户端验证
Web 表单已成为 Web 应用程序的重要组成部分。它通常用于收集用户的信息，例如姓名、电子邮件地址、位置、年龄等。但是很可能某些用户可能不会按照您的预期输入数据。因此，为了节省带宽并避免对服务器资源造成不必要的压力，您可以使用 JavaScript 在客户端（即用户的系统）上验证表单数据，然后再将其传递到 Web 服务器以进行进一步处理。
客户端验证也有助于创造更好的用户体验，因为验证发生在用户的 Web 浏览器中，因此速度更快，而服务器端验证发生在服务器上，这需要首先提交用户的输入并将其发送到在验证发生之前的服务器，用户也必须等待服务器响应才能知道到底出了什么问题。
在下一节中，我们将仔细研究如何执行 JavaScript 表单验证并适当而优雅地处理发现的任何输入错误。
注意： 客户端验证不能替代或替代服务器端验证。 您应该始终在服务器端验证表单数据，即使它们已经在客户端验证，因为用户可以在他们的浏览器中禁用 JavaScript。
使用 JavaScript 进行表单验证
表单验证过程通常由两部分组成— 必填字段验证，用于确保所有必填字段均已填写，以及 数据格式验证，用于确保数据的类型和格式 表格中输入的数据有效。
好吧，让我们直接进入它，看看它是如何工作的。
创建 HTML 表单
让我们首先创建一个简单的 HTML 表单，当用户单击提交按钮时，我们将在客户端使用 JavaScript 对其进行验证。 好吧，让我们创建一个名为"application-form.html"的 HTML 文件并将以下代码放入其中，然后将其保存在系统的某个位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple HTML Form</title>
<link rel="stylesheet" href="style.css">
<script src="validator.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()" action="confirmation.asp" method="post">
<h2>Application Form</h2>
<div class="row">
<label>Full Name</label>
<input type="text" name="name">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Mobile Number</label>
<input type="text" name="mobile" maxlength="10">
<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label>Country</label>
<select name="country">
<option>Select</option>
<option>Australia</option>
<option>India</option>
<option>United States</option>
<option>United Kingdom</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="row">
<label>Gender</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="row">
<label>Hobbies <i>(Optional)</i></label>
<div class="form-inline">
<label><input type="checkbox" name="hobbies[]" value="sports"> Sports</label>
<label><input type="checkbox" name="hobbies[]" value="movies"> Movies</label>
<label><input type="checkbox" name="hobbies[]" value="music"> Music</label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>构建表单验证脚本
现在我们将创建一个包含完整验证脚本的 JavaScript 文件。
好吧，让我们创建一个名为"validator.js"的 JavaScript 文件，并将以下代码放入其中，然后将其保存在与之前的 HTML 文件相同的位置。 浏览以下示例代码的每一行以了解 JavaScript 验证的工作原理：
// Defining a function to display error message
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 定义一个函数来验证表单
function validateForm() {
// 检索表单元素的值
var name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = [];
var checkboxes = document.getElementsByName("hobbies[]");
for(var i=0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) {
// 用选定的值填充爱好数组
hobbies.push(checkboxes[i].value);
}
}
// 使用默认值定义错误变量
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
// 验证名称
if(name == "") {
printError("nameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
} else {
printError("nameErr", "");
nameErr = false;
}
}
// 验证电子邮件地址
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
// 验证手机号码
if(mobile == "") {
printError("mobileErr", "Please enter your mobile number");
} else {
var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Please enter a valid 10 digit mobile number");
} else{
printError("mobileErr", "");
mobileErr = false;
}
}
// 验证地区
if(country == "Select") {
printError("countryErr", "Please select your country");
} else {
printError("countryErr", "");
countryErr = false;
}
// 验证性别
if(gender == "") {
printError("genderErr", "Please select your gender");
} else {
printError("genderErr", "");
genderErr = false;
}
// 如果有任何错误，请阻止提交表单
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
return false;
} else {
// 从输入数据创建字符串以供预览
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) {
dataPreview += "Hobbies: " + hobbies.join(", ");
}
// 在提交表单之前在对话框中显示输入数据
alert(dataPreview);
}
};可以使用语法 document.formName.fieldName.value 或 document.getElementsByName(name).value 访问和检索单个表单字段的值。 但是，要从支持多选的表单字段（例如一组复选框）中获取值，您需要使用上面示例中所示的 循环语句（第 14 行到第 21 行）。
此外，为了检查输入数据的格式是否正确，我们使用了 正则表达式。 它是验证用户输入的最有效技术之一。
此外，上述脚本还将在将表单提交到 Web 服务器之前，将用户输入的数据显示在警告对话框中以供预览。
提示： 但是，您可以使用正则表达式验证电子邮件格式。 但是用户可能会输入格式正确但不存在的电子邮件。 因此，对于真实的电子邮件验证，向用户发送确认电子邮件并验证电子邮件是否真的存在。
添加样式表美化表单
最后，创建名为"style.css"的文件并将以下代码放入其中，然后将其保存在与前两个文件相同的位置。 这些是美化我们表单的样式规则。
body {
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
form {
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: #999;
font-size: 80%;
}
input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}
.row {
padding-bottom: 10px;
}
.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}
.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 90%;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #0165b6;
}就是这样，现在在网络浏览器中打开"application-form.html"文件并尝试填充一些数据，看看当在表单字段中输入无效数据时脚本如何响应。
要了解服务器端验证，请查看 PHP 表单验证的教程