前端验证，jquery.validate插件

jQuery Validate

简介：

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。

使用：

导入 js 库

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
验证提示默认为英文，想要中文，需引入中文包，本地包在dist/localization/messages_zh.js
可以使用cdn

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

demo

 // 在键盘按下并释放及提交后验证提交表单
   $("#signupForm").validate({
     rules: {
       firstname: "required",
       lastname: "required",
       username: {
         required: true,
         minlength: 2
       },
       password: {
         required: true,
         minlength: 5
       },
       confirm_password: {
         required: true,
         minlength: 5,
         equalTo: "#password"
       },
       email: {
         required: true,
         email: true
       },
       topic: {
         required: "#newsletter:checked",
         minlength: 2
       },
       agree: "required"
     },
     messages: {
       firstname: "请输入您的名字",
       lastname: "请输入您的姓氏",
       username: {
         required: "请输入用户名",
         minlength: "用户名必需由两个字母组成"
       },
       password: {
         required: "请输入密码",
         minlength: "密码长度不能小于 5 个字母"
       },
       confirm_password: {
         required: "请输入密码",
         minlength: "密码长度不能小于 5 个字母",
         equalTo: "两次密码输入不一致"
       },
       email: "请输入一个正确的邮箱",
       agree: "请接受我们的声明",
       topic: "请选择两个主题"
      }
     })

至此，一个简单的demo就完成了

总结：

1. 引入js
2. 看demo
3. 根据需求进行修改