jQuery - 学习笔记 - jQuery Validation Plugin

Posted 2022-01-08 笑虾

jQuery - 学习笔记 - jQuery Validation Plugin

• 基本用法
• 初始化参数
• 添加自定义验证规则
• 设置默认配置
• 参考资料

基本用法

一般项目中还会对它做一下封装。

$(function()
    $( "#表单id").validate(
        rules: 
            标签甲name:  // 对应要验证的元素，支持多个
           		验证规则a: 条件 // 验证规则，支持多个
             
        ,
        messages:  // 自定义失败提示信息（不写会用默认的）
            标签甲name:  // 与上面的规则对应
                验证规则a: "你写的什么鬼？"
            
        
    );
);

if(!$( "#表单id" ).validate())  // 执行验证
	alert( "验证结果: " + $("#表单id")valid()); // 显示结果
    return;

初始化参数

validate()方法还提供了一堆可选参数。
比如：验证成功/失败的提示样式、放置位置、验证的时机、自定义忽略标记等等。
详见： 菜鸟教程 jQuery.validate 中文 API 已经够用了，这里就不造轮子了。

添加自定义验证规则

官方提供了扩展接口 jQuery.validator.addMethod() 用于添加规则。
并且官方还推荐了个用来写扩展规则的地方：additional-methods.js 和主文件一起引用即可。
所以最好不要直接去改 jquery.validate.js

/**
 * 自定义正则验证 ： pattern 就是 validate 方法参数中的 "验证规则x"
 * @param value		被验证的值 (通常就是 input、text 的内容)
 * @param element	被验证的元素 (通常就是 input、text)
 * @param param		验证的条件 (我们传个想要的正则表达式，这里就会用它来对 value 进行验证)
 * @returns boolean 符合条件返回 true
 */
$.validator.addMethod("pattern", function(value, element, param) 
	if (this.optional(element)) 
		return true;
	
	if (typeof param === "string") 
		param = new RegExp(param );
	
	return param.test(value);
, "验证失败！"); 

用法：

$(function()
    $( "#表单id").validate(
        rules: 
            标签甲name:  // 对应要验证的元素
           		pattern: '^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\\\\d8$' // 验证规则
             
        
        ...
    );
);

设置默认配置

jQuery.validator.setDefaults()

参考资料

jQuery Validation Plugin 官网
jQuery Validation Plugin 文档
Github 下载地址
jQuery Validate | 菜鸟教程

湖边的小屋圣迹：验证规则收集