srcmini上一章JavaScript教程请查看：JS正则表达式
在本教程中，你将学习如何使用JavaScript验证HTML表单。
了解客户端验证
Web表单已经成为Web应用程序的重要组成部分。它通常用于收集用户的信息，如姓名、电子邮件地址、位置、年龄等。但是很可能有些用户并没有输入你所期望的数据。因此，为了节省带宽并避免对服务器资源造成不必要的压力，你可以在将表单数据传递到web服务器进行进一步处理之前，使用JavaScript在客户端(即用户的系统)验证表单数据。
客户端验证也有助于创造更好的用户体验,因为它是快因为验证发生在用户的web浏览器,而服务器端验证在服务器上发生,需要先提交用户输入和发送到服务器验证发生之前,用户必须等待服务器响应也知道到底是哪里出了错。
在下一节中，我们将进一步研究如何执行JavaScript表单验证并适当地处理发现的输入错误。
注意：客户端验证不是服务器端验证的替代品，你应该始终在服务器端验证表单数据，即使它们已经在客户端验证过了，因为用户可以在他们的浏览器中禁用JavaScript。
使用JavaScript进行表单验证
表单验证过程通常由两部分组成——这是执行所需的字段验证以确保填写所有必填字段,执行和数据格式验证,以确保表单中输入的数据的类型和格式是有效的。
好吧，让我们直接开始，看看它是如何工作的。
创建HTML表单
让我们首先创建一个简单的HTML表单，当用户单击submit按钮时，我们将使用JavaScript在客户端验证这个表单。让我们创建一个名为“应用程序表单”的HTML文件。然后将以下代码放入其中，然后将其保存在系统中的某个地方。
<!DOCTYPE html>
<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.php" 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”的JavaScript文件，然后将下面的代码放入其中，然后将它保存在保存前一个HTML文件的相同位置，浏览下面示例代码的每一行，以了解JavaScript验证是如何工作的:
// 定义显示错误消息的函数
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// 定义用于验证表单的函数
function validateForm() {
// Retrieving the values of form elements
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) {
// Populate hobbies array with selected values
hobbies.push(checkboxes[i].value);
}
}
// 使用默认值定义错误变量
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
// 验证name
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;
}
}
// 验证email
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;
}
}
// Validate country
if(country == "Select") {
printError("countryErr", "Please select your country");
} else {
printError("countryErr", "");
countryErr = false;
}
// Validate gender
if(gender == "") {
printError("genderErr", "Please select your gender");
} else {
printError("genderErr", "");
genderErr = false;
}
// 如果有任何错误，则阻止提交表单
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
return false;
} else {
// Creating a string from input data for preview
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(", ");
}
// Display input data in a dialog box before submitting the form
alert(dataPreview);
}
};可以使用document.formName.fieldName语法访问和检索单个表单字段的值，值或document.getElementsByName value(名字)。但是，要从支持多个选择的表单字段(比如一组复选框)获取值，你需要使用上面示例中所示的loop语句(第no-14到21行)。
另外，为了检查输入数据的格式是否正确，我们使用了正则表达式。它是验证用户输入最有效的技术之一。
此外，在将表单提交给web服务器之前，上面的脚本还将在警告对话框中显示用户输入的数据，以便进行预览。
提示：但是，你可以使用正则表达式验证电子邮件格式。但是用户可以输入格式正确但不存在的电子邮件。因此，对于真实的电子邮件验证，发送确认电子邮件给用户，并验证电子邮件是否真的存在。
添加样式表来美化表单
最后，创建名为“style”的文件。然后将下面的代码放入其中，然后将它保存在你保存前两个文件的相同位置。这些是美化表单的样式规则。
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表单验证教程
评论前必须登录！
注册