51工具盒子
之前文章也提到过，在Web前端开发的学习中，不要太盲目去追求框架（vue,react），我们还需要掌握原生的JS或者一些JQ等，以便解决一些"燃眉之急"的简单项目。
比如有时候老板让你快速搞定一个form的功能，并且这个页面也就1-2天的存活期，所以这时候没必要去用框架（vue,react）弄了。那么问题来了，如何分分钟搞定"用JS设置表单form"的验证功能？
我们将使用jQuery Validation Plugin来验证我们的表单。该插件的基本原理是为JavaScript中的HTML元素指定验证规则和错误消息。
废话不多说，直接开干吧！！！！
步骤1：包含jQuery
首先，我们需要包括jQuery库。jQuery验证插件已经在jQuery 3.1.1之前进行了测试，但是本文中的演示与最新版本3.4.1完美兼容。
您可以使用以下任何下载选项：
-
使用Bower下载：
$ bower install jquery -
使用npm或Yarn下载它：
$ npm install jquery或yarn add jquery -
使用CDN：
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
创建一个名为的新HTML文件，index.html并在结束</body>标记之前包含jQuery ：
<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery/dist/jquery.min.js"></script>
你也可以使用Bower或npm去操作。
步骤2：包括jQuery验证插件
选择：
-
使用Bower下载：
$ bower install jquery-validation -
使用npm下载：
npm i jquery-validation -
NuGet：
Install-Package jQuery.Validation -
使用CDN：
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js
在jQuery之后添加插件：
<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
步骤3：建立HTML表单
对于注册，我们要收集以下用户信息：
-
名字
-
姓
-
电子邮件
-
密码
因此，让我们创建包含以下输入字段的表单：
<div class="container">
<h2>Registration</h2>
<form action="" name="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"/>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"/>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com"/>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●"/>
<button type="submit">Register</button>
</form>
</div>
将其集成到实际应用程序中时，请不要忘记填写action属性，以确保将表单提交到正确的目的地。
步骤4：为表单创建样式
创建一个新文件，css/styles.css并将其包括在<head>HTML文件的部分中：
<link rel="stylesheet" href="css/style.css"/>
将以下样式复制到新创建的文件中：
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}
请注意的样式.error，这些样式将用于验证错误消息。
步骤5：创建验证规则
最后，我们需要初始化表单验证插件。创建一个新文件，js/form-validation.js并<script>在jQuery Validation插件的标签之后引用它：
<script src="js/form-validation.js"></script>
将以下代码复制到新创建的文件中：
// Wait for the DOM to be ready
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='registration']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
firstname: "required",
lastname: "required",
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address"
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});
想要完整DEMO源码的童鞋，可以加Q群@群主，这里就不提供了，谢谢。
结论
就是这样，您完成了！现在您有了一个想法，如何使用jQuery设置表单验证。请记住，这不能代替服务器端验证。恶意用户仍然有可能操纵或绕过验证规则（例如，通过使用浏览器的开发人员工具）。
