jquery.validate定义规则失效的常见原因和该插件详细使用介绍，应用

当我们使用jquery.validate作为前端验证的插件的时候，需要注意两个容易出错的地方，会导致你写的规则不起作用

1.jquery.validate引入依赖js的顺序

jquery.validate依赖jquery.min.js，jquery.validate.min.js，messages_zh.min.js三个主要包，这里注意要先引入jquery.min.js，然后再引入后面的两个js，因为后面的两个js里，大部分方法依赖于jquery.min.js，所以要先引入jquery.min.js，否则jquery.validate里的方法会因为报错，而不起作用

2.提交表单的按钮，是否在form表单的里面

2.1 当你提交表单的按钮在form表单的里面的时候，正常写了下面的规则

$("#job-add-form").validate({
        rules:{
            beanName:{
                required:true
            },
            methodName:{
                required:true,
            },
            cronExpression:{
                required:true,
            }
        },
        messages:{
            beanName:{
                required:"必填项"
            },
            methodName:{
                required:"必填项",
            },
            cronExpression:{
                required:"必填项",
            }
        }

    });

能够出现正常的下面验证显示信息

在这里插入图片描述

2.1 当你提交表单的按钮在form表单的外面的时候，会发现上面的规则就失效了，页面上也显示不出验证信息

这个时候你需要在外面按钮的点击事件里调用jquery.validate.min.js里的valid()方法才能使验证生效

var flag = $jobAddForm.valid();判断验证是否通过通过会为true，再去执行提交的操作即可，不通过的时候上面的验证信息也会显示出来

3.jquery.validate详细使用

3.1选择器

       :blank –选择所有值为空的元素
       :filled – 选择所有值不为空的元素
       :unchecked –选择所有未被选中的元素

3.2校验方法

       validate() – 对选中的表单进行校验
       valid() – 判断选中的表单或元素输入的内容是否有效
       rules() – 获取、添加或者移除元素的规则

// 移除元素的所有校验规则
$("#beanName").rules("remove");
// 为元素添加 required max min 校验规则
$("#beanName").rules("add", {
    required: true,
    max: 100,
    min: 10
});
// 移除元素的 max min 校验规则
$("#beanName").rules("remove", "min max");

3.3Validator对象使用

  调用 validate() 方法将会返回一个 Validator 对象，该对象提供了很多方法，下面是其中比较常用的一些方法。
       Validator.form() – 校验表单
       Validator.element() – 校验元素
       Validator.resetForm() – 重置表单
       Validator.showErrors() – 显示指定的错误信息
       Validator.numberOfInvalids() – 显示无效的项目数量
       Validator.destroy() –销毁Validator对象
      
       jQuery.validator.addMethod() – 添加一个自定义的校验方法
       jQuery.validator.format() – 使用参数替换掉 {n} 占位符
       jQuery.validator.setDefaults() – 修改校验器的默认选项
       jQuery.validator.addClassRules() – 为某一类元素添加校验规则

3.4规则名称

required Boolean 设置该项内容为必填

remote Json|String 请求远程资源来校验内容有效性

minlength Number 设置内容的最少字符长度

maxlength Number 设置内容的最多字符长度

rangelength Array 设置内容的字符长度范围

min Number 设置内容的最小允许值

max Number 设置内容的最大允许值

range Array 设置内容的允许值范围

step Number 设置内容为某一固定值的倍数

email Boolean 设置该项内容为一个有效邮箱地址

url Boolean 设置该项内容为一个有效网址

date Boolean 设置该项内容为日期格式

dateISO Boolean 设置该项内容为ISO日期格式

number Boolean 设置该项内容为十进制小数

digits Boolean 设置该项内容为十进制整数

equalTo Selector 设置该项内容与指定元素内容相同

accept String 设置上传文件所接受的 MIME 类型

creditcard Boolean 设置该项内容为一个信用卡卡号

extension String 设置上传文件所接受的扩展名

phoneUS Boolean 设置该项内容为一个美国电话号码

require_from_group Array 设置同一组至少填写多少项

3.5应用

3.5.1.validate()方法应用

    var validator = $("#job_add_form").validate();
    validator.element("#beanName");
    validator.showErrors({
        "beanName": "该内容不能为空"
    });
    validator.form();
    console.log(validator.numberOfInvalids() + " 个字段无效");
    validator.resetForm();
    validator.destroy();

2.简单用户注册应用

$("#addUserInfo").validate({
        rules: {
            username: {
                required: true,
                minlength: 2,
                //异步验证
                remote: {
                    url: "userManage/username",//发送请求的url地址
                    type: "post", //请求方式
                    dataType: "json",//接收的数据类型
                    data: {
                        username: function () {
                            return $("#username").val();
                        }
                    },
                    dataFilter: function (data, type) { //过滤返回结果
                        if (data == "true")
                            return true;  //true代表用户名还未存在
                        else
                          return false; //false代表用户名已经存在
                    }
                }
            },
            password: {
                required: true,
                minlength: 5
            },
            confirmpassword: {
                required: true,
                minlength: 5,
                equalTo:"#password"
            },
            mobile: {
                required: true,
                minlength: 5,
            },
        },
        messages: {
            username: {
                required: "请输入用户名",
                minlength: "用户名必需由两个字母组成",
                remote:"输入的用户名已经存在"
            },
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母"
            },
            confirmpassword: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo:"两次输入密码不一致"
            },
            mobile: {
                required: "请输入手机号",
                minlength: "手机号长度不能小于 5 个字母"
            },
        }
    });

3.jQuery.validator应用

	jQuery.validator.addMethod("test",
	function(value, element, params) {
		return this.optional(element) || value == result;
	},
	jQuery.validator.format("用户名至少需填写{0}个字符"));
	
	jQuery.validator.addClassRules("test_class", {
		required: true,
		test: [0, 'test_class',0]
	});
	jQuery.validator.setDefaults({
		// 仅做校验，不提交表单
		debug: true,
		// 提交表单时做校验
		onsubmit: true,
		// 焦点自动定位到第一个无效元素
		focusInvalid: true,
		// 元素获取焦点时清除错误信息
		focusCleanup: true,
		//忽略 class="ignore" 的项不做校验
		ignore: ".ignore",
		// 忽略title属性的错误提示信息
		ignoreTitle: true,
		// 为错误信息提醒元素的 class 属性增加 invalid 
		errorClass: "invalid",
		// 为通过校验的元素的 class 属性增加 valid 
		validClass: "valid",
		// 使用 <em> 元素进行错误提醒
		errorElement: "em",
		// 使用 <li> 元素包装错误提醒元素
		wrapper: "li",
		// 将错误提醒元素统一添加到指定元素
		errorLabelContainer: "#error_messages ul",
		// 自定义错误容器
		errorContainer: "#error_messages, #error_container",
		// 自定义错误提示如何展示
		showErrors: function(errorMap, errorList) {
			$("#error_tips").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
			this.defaultShowErrors();
		},
		// 自定义错误提示位置
		errorPlacement: function(error, element) {
			//默认情况error.appendTo(element.parent());即把错误信息放在验证的元素后面。
			//error.insertAfter(element);
			element.before(error)可以直接用element来指定，把错误信息放在验证的元素前面。
		},
		// 单个元素校验通过后处理
		success: function(label, element) {
			console.log(label);
			console.log(element);
			label.addClass("valid").text("Ok!")
		},
		//高光显示
		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);
		},
		//校验通过后的回调，可用来提交表单
		submitHandler: function(form, event) {
			console.log($(form).attr("id"));
			//$(form).ajaxSubmit();
			//form.submit();
		},
		//校验未通过后的回调
		invalidHandler: function(event, validator) {
			// 'this' refers to the form
			var errors = validator.numberOfInvalids();
			if (errors) {
				var message = errors == 1 ? 'You missed 1 field. It has been highlighted': 'You missed ' + errors + ' fields. They have been highlighted';
				console.log(message);
			}
		}
	});

4.大部分规则名称整合运用

$("#example_form").validate({
		rules: {
			name: {
				required: true,
				minlength: 2,
				maxlength: 24
			},
			age: {
				required: true,
				rangelength: [1, 3],
				min: 10
			},
			birthday: {
				required: true,
				date:true,
				//dateISO: true
			},
			card: {
				required: {
					//要先满足什么条件
					depends: function(element) {
						return $("#user_age").val() >= 18;
					}
				},
				creditcard: true
			},
			salary: {
				required: true,
				step: {
					param: 100,
					depends: function(element) {
						return $("#user_age").val() >= 28;
					}
				}
			},
			prove: {
				required: function(element) {
					return $("#user_age").val() >= 18;
				},
				extension: "xls|csv|doc"
			},
			phone: {
				require_from_group: [1, ".phone_group"],
				phoneUS: true
			},
			mobile: {
				require_from_group: [1, ".phone_group"]
			},
			image: {
				required: true,
				accept: "image/*"
				//accept:"audio/*,image/x-eps,application/pdf"
			},
			home: {
				required: true,
				url: true,
				// 校验之前对内容进行处理
				normalizer: function(element) {
					var url = $.trim($(element).val());
					// 检查不是以 http:// or https:// or ftp:// 开头的网址
					if (url && url.substr(0, 7) !== "http://" && url.substr(0, 8) !== "https://" && url.substr(0, 6) !== "ftp://") {
						// 拼接上 http://
						url = "http://" + url;
					}
					return url;
				},
				// 失去焦点时进行校验
				onfocusout: function(element, event) {
					console.log(element);
				},
				onkeyup: function(element, event) {
					console.log(element);
				},
				onclick: function(element, event) {
					console.log(element);
				}
			},
			password: {
				required: true,
				minlength: 6
			},
			repassword: {
				required: true,
				//与password的值判断是否相等
				equalTo: "#password"
			},
			email: {
				required: "#send_to_me:checked",
				email: true,
				//发送异步请求
				remote: {
					url: "http://localhost:8080/check/register",
					type: "post",
					dataType: "json",
					data: {
						email: $("#user_email").val()
					}
				}
			},
		//自定义错误提示信息
		messages: {
			name: {
				required: "请输入用户名",
				minlength: jQuery.validator.format("用户名至少需填写{0}个字符"),
				maxlength: jQuery.validator.format("用户名最多填写{0}个字符")
			}
		},
	});

原文链接：https://blog.csdn.net/qq_40136782/article/details/109222441