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

请在这里查看示例

示例包含

源码示例

 !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 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 * /span span 此项必填 /span /div ',
 isEven: ' div span * /span span 不是偶数 /span /div ',
 // 验证成功后的回调
 success: function(label) {
 (' div span * /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.Validate表单验证插件的使用示例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！