JS表单验证 – JavaScript高级教程 JS表单验证|JavaScript

上一章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="http://www.srcmini.com/style.css"> < script src="http://www.srcmini.com/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="http://www.srcmini.com/male"> Male< /label> < label>< input type="radio" name="gender" value="http://www.srcmini.com/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="http://www.srcmini.com/sports"> Sports< /label> < label>< input type="checkbox" name="hobbies[]" value="http://www.srcmini.com/movies"> Movies< /label> < label>< input type="checkbox" name="hobbies[]" value="http://www.srcmini.com/music"> Music< /label> < /div> < /div> < div class="row"> < input type="submit" value="http://www.srcmini.com/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”，尝试填充一些数据，并查看在表单字段中输入无效数据时脚本如何响应。
【JS表单验证 – JavaScript高级教程】要了解服务器端验证，请参阅PHP表单验证教程