jquery.validate.js 详解

关注

原创最新推荐文章于 2026-03-27 10:07:41 发布 4.7k 阅读 AI 写同款· GEO 优化 ›

jQuery Validate 表单验证插件一、jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，. 阅读详情

jquery下载地址：https://jquery.com/download/

jquery.validate.js下载地址：https://cdnjs.com/libraries/jquery-validate

jquery.validate.js是我们经常用到的form表单验证插件，可以很方便的帮我们进行表单验证。这里来学习一下他的用法，觉得不够详细的同学，可以去官网继续学习。

1.jquery.validate.js依赖于jquery，在页面引入jquery.validate.js前一定要先引入jquery。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"  src="js/jquery.validate.js"></script>

2.使用jquery.validate.js进行验证，需要先对form表单进行规则添加，添加的方法为 .validate( [options ] ) ，可以调用.valid() 来获取验证结果。

1.validate( [options ] ) 制定规则

1.1options

options	类型	默认值	参数	解释
debug	boolean	`false`		启用调试模式。如果为true，则不提交表单，并在控制台上显示某些错误（检查Windows是否存在控制台属性）。如果要启用调式模式，需要在提交表单时将该属性置为false，而不是在验证完以后。
submitHandler	function()	native form submit	event：提交事件 form：当前被验证的form，作为一个元素返回。	用于在表单有效时处理实际提交的回调。设置该属性后，验证通过后将不会默认提交请求，而是执行该属性定义的方法。这里可以做一些请求预处理或者请求回调。
invalidHandler	function()		event：自定义事件对象 validator：当前表单的验证结果	提交无效表单时的自定义代码回调。
ignore	Selector	hidden		验证时要忽略的元素
rules	object	从标记（类、属性、数据）读取规则		定义自定义规则的键/值对。键是元素的名称（或一组复选框/单选按钮），值是由规则/参数对或纯字符串组成的对象。可以与类/属性/数据规则组合。每个规则都可以指定为具有依赖属性，以便仅在特定条件下应用该规则。
messages	object			定义自定义消息的键/值对。键是一个元素的名称，值是要为该元素显示的消息。可以使用另一个映射，其中包含每个规则的特定消息，而不是普通消息。重写元素的title属性或方法的默认消息（按该顺序）。每个消息可以是字符串或回调。回调在验证器的作用域中调用。
groups	object			指定错误消息的分组。一个组由一个任意的组名作为键和一个以空格分隔的元素名列表作为值组成。使用errorPlacement控制组消息的放置位置。
normalizer	function()			准备/转换要验证的元素值，这个方法只会将元素的值在验证前进行转换，并不会转换元素的初始值。eg:一个元素的值为a,该方法会将其转换为b进行验证，但最终请求时传的参数值仍然是a。该属性也可以作用在单个元素上，作用域取决于他的位置。
onsubmit	boolean	true	event element	是否在提交前验证，默认为true。如果改为false，那么可以去除提交前的验证，想什么时候验证什么时候验证。
onfocusout	boolean/function()		event element	失去焦点验证。可以将该值设置为false或者一个function。true无效。
onkeyup	boolean/function()		event element	是否在敲击键盘时验证。可以将该值设置为false或者一个function。true无效。
onclick	boolean/function()		event element	是否在点击时验证。可以将该值设置为false或者一个function。true无效。
focusInvalid	boolean	true		当该值为true时，提交表单后，如果有一个元素拥有焦点，那么焦点仍然处于该元素；否则，第一个未通过验证的元素将获得焦点。
focusCleanup	boolean	false		当一个错误的元素获取到焦点时，移除他的错误属性，避免与focusInvalid组合使用。
errorClass	String	error		使用此类创建错误标签，查找现有错误标签并将其添加到无效元素中。
validClass	String	valid		为验证成功的元素添加属性
errorElement	String	label		指定创建错误信息的元素，默认时label。label的好处在于清晰的展示错误信息和错误元素的关系。
wrapper	String	window		用指定的元素包装错误标签。与errorLabelContainer结合使用可创建错误消息列表
errorLabelContainer	Selector			指定展示wrapper过的错误信息的元素。
errorContainer	Selector			指定需要展示的errorLabelContainer。
showErrors	function()		errorMap errorList	自定义消息显示处理程序。参数只包含当前已验证的那些元素，在对focusout或keyup进行验证时，这些元素可以是单个元素。通过调用this.defaultShowErrors()来触发（除了您自己的消息之外）默认行为。
errorPlacement	function()	默认追加在验证的元素后面	error：错误的label element：验证的元素	自定义错误信息的添加位置
success	String/function()			为成功的元素添加class，或者指定成功的label
highlight	function()	将errorClass添加到错误的元素上	element errorClass validClass	为错误的元素添加errorClass
unhighlight	function()	将错误的元素上的errorClass移除		将错误的元素上的errorClass移除
ignoreTitle	boolean	false		设置为跳过从title属性读取消息，有助于避免Google工具栏出现问题；默认值为false表示兼容性，title中的消息很可能在将来的版本中被完全删除。

1.2 rules 默认可用的规则（additional-methods.js 提供了更多的方法）

options	类型	注释
required	boolean	是否必填
email	boolean	是否输入正确的email格式
url	boolean	是否输入正确的url格式
date	boolean	是否输入正确的日期格式
dateISO	boolean	是否输入正确的ISO日期格式
number	boolean	是否输入正确的数字
digits	boolean	是否输入正确的自然数（0,1,2,3,4....）
equalTo	selector	是否和selector的值相同
accept	String	是否输入合法后缀名的字符串
maxlength	number	最大长度
minlength	number	最小长度
rangelength	[0,5]	长度在[0,5]内
max	number	最大值
min	number	最小值
range	[0,5]	大小在[0,5]内
remote	object return:boolean	异步检查输入的值是否符合要求
step	number	是否输入给定的数字step

1.3 使用示例：

1.debug

$("#myform").validate({
        debug: true
});

2.submitHandler

改为ajax提交：
$("#myform").validate({
        submitHandler: function(form) {
                        $(form).ajaxSubmit();
        }
});

默认提交预处理：
$("#myform").validate({
          submitHandler: function(form) {
                            //在这里添加请求预处理
                            form.submit();
          }
});

3.invalidHandler

$("#myform").validate({
        invalidHandler: function(event, validator) {
                        // 'this' 代表当前的form
                        var errors = validator.numberOfInvalids();
                        if (errors) {
                            $("div.error span").html("失效字段有"+errors +"个");
                            $("div.error").show();
                        } else {
                            $("div.error").hide();
                        }
         }
});

4.ignore

忽略所有被class ‘ignore修修饰的元素

$("#myform").validate({
        ignore: ".ignore"
});

5.rules

1.简单的规则：
$("#myform").validate({
        rules: {
            // 这里可以使用字符串"required",也可以使用{required:true}
            name: "required",
            // 组合规则。
            email: {
                required: true,
                //符合email规则
                email: true
             }
         }
});

2.依赖规则
$("#myform").validate({
  rules: {
    contact: {
      required: true,
      //是否是email地址决定于元素contactform_email是否被选择
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

3.当元素bonus-material被选择时，那么元素pay_what_you_want的值最小为15
$("#myform").validate({
  rules: {
    pay_what_you_want: {
      required: true
      min: {
        param: 15,
        depends: function(element) {
          return $("#bonus-material").is(":checked");
        }
      }
    }
  }
});

6.messages

1.简单的message
$("#myform").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    //name没有填时展示的信息
    name: "Please specify your name",
    email: {
      //email没有填时展示的信息
      required: "We need your email address to contact you",
      //email违规时展示的信息
      email: "Your email address must be in the format of name@domain.com"
    }
  }
});

2.带参的message
$("#myform").validate({
  rules: {
    name: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    name: {
      required: "We need your email address to contact you",
      //name长度不够时展示的消息，这里的{0}代表rules中的minlength的值
      minlength: jQuery.validator.format("At least {0} characters required!")
    }
  }
});

7.groups

对表单使用表布局，在输入后的下一个单元格中放置错误消息。
$("#myform").validate({
  groups: {
    //创建一个组名为username的组，该组可以控制元素名为fname，lname的元素
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    //一旦元素名称为fname或者lname，那么将错误信息添加到元素id为lastname的元素后面
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
     //否则添加到错误元素后面
      error.insertAfter(element);
    }
  }
});

8.normalizer

1.将值进行trim处理

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and use a normalizer to trim its value before validating</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate( {
	 submitHandler :function(form){
		 var d = {};
		     alert(JSON.stringify($(form).serializeArray()));
	 },
  rules: {
    field: {
      required: true,
      normalizer: function( value ) {
        // Trim the value of the `field` element before
        // validating. this trims only the value passed
        // to the attached validators, not the value of
        // the element itself.
        return $.trim( value );
      }
    }
  }
} );
</script>
</body>
</html>

2.

9.errorClass

使用invalid作为错误的class
$("#myform").validate({
  errorClass: "invalid"
});

10.validClass

为所有通过验证的元素添加success属性
$("#myform").validate({
  validClass: "success"
});

11.wrapper,errorLabelContainer

将错误的信息用li封装成一个无序的列表，并展示在id为messageBox的元素中。
$("#myform").validate({
  errorLabelContainer: "#messageBox",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

12.errorContainer

将错误的信息用li封装成一个无序的列表，并展示在id为messageBox的元素中。
展示messageBox1和messageBox2的错误内容
$("#myform").validate({
  errorContainer: "#messageBox1, #messageBox2",
  errorLabelContainer: "#messageBox1 ul",
  wrapper: "li", debug:true,
  submitHandler: function() { alert("Submitted!") }
});

13.showErrors

$("#myform").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});

14.errorPlacement

$("#myform").validate({
  errorPlacement: function(error, element) {
    //将封装错误信息的label追加到元素父节点中的第一个td后面的td中
    error.appendTo( element.parent("td").next("td") );
  }
});

15.success

1.将验证通过的元素的class添加valid
$("#myform").validate({
  success: "valid",
  submitHandler: function() { alert("Submitted!") }
});

2.创建一个class为valid的label，并且将内容设置位"ok！"
$("#myform").validate({
  success: function(label) {
    label.addClass("valid").text("Ok!")
  },
  submitHandler: function() { alert("Submitted!") }
});

16.highlight，unhighlight

1.将错误的元素添加闪烁效果
$("#myform").validate({
  highlight: function(element, errorClass) {
    $(element).fadeOut(function() {
      $(element).fadeIn();
    });
  }
});

2.当验证错误时将错误的元素添加errorClass，移除validClass，并将form下该元素ID的label添加errorClass；当验证成功时，将元素移除errorClass，添加validClass，并将form下该元素ID的label移除errorClass。

$("#myform").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

17.ignoreTitle

配置插件以在查找消息时忽略已验证元素的标题属性。
$("#myform").validate({
  ignoreTitle: true
});

18.remote

1.从地址check-email.php来检查是否通过
$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

2.通过post方法从check-email.php检查是否通过，参数为data
$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        }
      }
    }
  }
});

2.valid() 验证规则

$("#myForm").valid()。返回boolean，表示验证是否通过。

3.rules() 对一个元素查看，添加，移除规则。

1.查看规则

console.log($("#field").rules().toString());

控制台:{"required":true}

2.添加规则

$( "#myinput" ).rules( "add", {
  minlength: 2
});

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});

3.移除规则

$( "#myinput" ).rules( "remove" );

$( "#myinput" ).rules( "remove", "min max" );

4.Validator

validate方法返回一个Validator对象，这个对象提供了一些方法供我们使用，学会这些方法可以更灵活的使用这个插件。

4.1 私有方法

方法	参数	返回值	描述
Validator.form()		boolean	验证表单元素并返回true/false。
Validator.element(element )	element	boolean	验证某个元素是否符合规则
Validator.resetForm()			重置表单
Validator.showErrors(errors )	object:包含键值对的json。键代表元素名称，值代表自定义的信息。		展示自定义的错误信息
Validator.numberOfInvalids()		number	返回未通过验证的元素个数
Validator.destroy()			销毁这个Validator实例，释放资源，并且移除已注册的事件。

用法：

添加并展示自定义的错误信息。
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
  "firstname": "I know that your firstname is Pete, Pete!"
});

展示未通过的fields
var validator = $( "#myform" ).validate({
  invalidHandler: function() {
    $( "#summary" ).text( validator.numberOfInvalids() + " field(s) are invalid" );
  }
});

4.2 静态方法

方法	参数	返回值	描述
jQuery.validator.addMethod( name,function(value, element, params), message )	name 方法名 function 方法 value 待验证的值 element 待验证的元素 params 方法的参数 message 展示的错误信息		添加一个自定义的方法
jQuery.validator.format(template,param...)	template 模板 param...参数		创建一个模板，并将参数依次替换进模板中的{0},{1}...位置
jQuery.validator.setDefaults(options)	options: validate方法的options		修改默认设置
jQuery.validator.addClassRules(name, rules)	name 添加的class名称 rules 触发的规则		设置一种class，将参数中的rules绑定到这个class上。将这个class修饰在某个元素上时，同时会为该元素设置对应的规则。

用法：

1.jQuery.validator.addMethod( name,function(value, element, params), message )

1.添加一个domain方法，用来验证元素的值是否以http://mycorporatedomain.com开头，未通过验证的响应信息为Please specify the correct domain for your documents
jQuery.validator.addMethod("domain", function(value, element) {
  return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");

2.添加一个math方法，该方法接受两个参数，用来检查给定的值是否等于两个参数的和，未通过验证的响应信息为jQuery.validator.format("Please enter the correct value for {0} + {1}")
jQuery.validator.addMethod("math", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

3.添加一个laxEmail方法，用来验证是否符合emal规则，未通过验证的响应信息为Please enter a valid email address.
jQuery.validator.addMethod("laxEmail", function(value, element) {
  // allow any non-whitespace characters as the host part
  return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value );
}, 'Please enter a valid email address.');

2.jQuery.validator.format(template,param...)

var template = jQuery.validator.format("{0} is not a valid value");
// later, results in 'abc is not a valid value'
alert(template("abc"));

3.jQuery.validator.addClassRules(name, rules)

1.设置一个绑定了规则{required: true, minlength: 2}的class，定义为name。
jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});

2.定义两个class
jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

收录于