关于jQuery.Validate表单验证插件的使用教程

更新时间：2020-02-11 12:41:02
编辑：申维娟

为网友们分享了jQuery相关的编程文章，网友薛吉月根据主题投稿了本篇教程内容，涉及到jquery、validate、表单验证插件、jQuery.Validate表单验证插件的使用示例详解相关内容，已被466网友关注，涉猎到的知识点内容可以在下方电子书获得。

参考资料

PHP与jQuery开发实例 PDF 电子书 / 9.8 MB / (印) 乔希 (Joshi,V.) 著，推荐度：
JavaScript和jQuery实战手册 PDF 电子书 / 103 MB / 大卫·索耶·麦克法兰德推荐度：
《jQuery应用开发实践指南》官网源代码配套资源 / 1.1 MB / Ralph Steyer 推荐度：
jQuery Web开发案例教程 PDF 电子书 / 15.1 MB / 前沿科技温谦推荐度：
jQuery EasyUI开发指南 PDF 电子书 / 48.4 MB / 王波推荐度：

正文内容

jQuery.Validate表单验证插件的使用示例详解

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。

请在这里查看示例 validate示例

示例包含

验证错误时，显示红色错误提示
自定义验证规则
引入中文错误提示
重置表单需要执行2句话

源码示例

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
 <title>demo</title> 
 <script src="../js/jquery-1.11.3.min.js"></script>
 <script src="js/jquery.validate.min.js"></script>
 <script src="js/messages_zh.min.js"></script>
 <style> 
  * { 
   margin: 0; 
   padding: 0; 
  } 
  body, html { 
   width: 100%; 
   height: 100%;
  } 
  .red {
   color: red;
  } 
  .green {
   color: green;
  }
 </style> 
</head> 
<body>
 <form id="form">
  <div>
   <input type="text" name="a" />
  </div>
  <div>
   <input type="submit" value="提交">
   <input class="reset" type="button" value="重置">
  </div>
 </form>
</body> 
<script> 
 $(function() {
  var validator = $('#form').validate({
   submitHandler:function(form){
    $('body').append('表单验证成功，发送了一个请求');
   },
   rules: {
    a: {
     required: true,
     isEven: true,// 使用自定义的验证规则
    },
   },
   messages: {
    a: {
     required: '<div><span class="red">*</span><span>此项必填</span></div>',
     isEven: '<div><span class="red">*</span><span>不是偶数</span></div>',
    },
   },
   // 验证成功后的回调
   success: function(label) {
    label.html('<div><span class="green">*</span><span>通过验证</span></div>');
   }
  });
  // 自定义验证
  jQuery.validator.addMethod('isEven', function(value, element) { 
   return this.optional(element) || !(value%2);
  }, '请输入一个偶数');
  // 重置表单
  $(".reset").click(function() {
   validator.resetForm();// 插件方法-删除错误提示
   $('#form')[0].reset();// 原生方法-清空输入内容
  });
 });
</script> 
</html>

jQuery相关教程

jquery访问ashx文件示例代码

ashx文件与.aspx文件类似，可以通过它来调用HttpHandler类。下面与大家介绍下jquery访问ashx文件的过程

发布时间：2019-08-28
写得不错的jquery table鼠标经过变色代码

鼠标经过table变色的效果，想必大家都有遇到过吧，其实实现并不难，在本文为大家详细介绍下jquery是如何实现的，感兴趣的朋友可以参看下

发布时间：2019-08-28
jQuery UI开发指南

《jQuery UI开发指南》是jQuery UI的快速开发指南，全面介绍jQuery UI如何改进HTML页面展示，内容包括jQuery UI 1.8版本的下列扩展特性：选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

大小：6.02 MB前端开发电子书
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外

大小：99.0 MBjQuery电子书
Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及之前针对PC端设计的网站已经无法满足用户的需求响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

大小：180 MBjQuery电子书
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》一书以实例驱动的方式，用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识，并通过5个项目案例展现开发流程。全书分为4部分，共19章：第1部分为移动开

大小：168.7 MBjQuery
锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版，事例选用全新升级的UI，编码更合乎词义化；提升jQueryMobile的章节目录；提升jQuery版本号转变的章节目录；提升jQuery特性提升和方法的章节目

大小：194.9 MBjQuery电子书
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发，而前端开发有一个流行趋势，那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

大小：48.4 MBjQuery电子书
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术，适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

大小：189.1 MBjQuery电子书
疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战

大小：131.7 MB前端开发电子书