jQuery - 学习笔记 - jQuery Validation Plugin
Posted 笑虾
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery - 学习笔记 - jQuery Validation Plugin相关的知识,希望对你有一定的参考价值。
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$' // 验证规则
...
);
);
验证隐藏域
场景:富文本。真正提交的是一个隐藏的输入框。可以参考菜鸟教程DEMO:Query 插件: 使用 TinyMCE 进行交互
对于隐藏域,通常我们需要做两件事。
- 在配置参数中忽略改为空。默认是
:hidden
。 - 隐藏域本身就看不见,我们要定义提示信息在哪显示。(对于标红要显示的富文本的输入框中)
$("#form").validate(
ignore: "", // 取消忽略,或改为其它你需要的选择器
rules: "略",
messages: "略",
// 更改错误信息显示的位置
// 如果name是我富文本的隐藏域,其它元素统一把错误信息放在验证的元素后面。
errorPlacement: function(error, element)
if(element.is("input[name='myText']"))
alert("正文不能为空!");
else
error.appendTo(element.parent());
);
错误信息控制
配置中支持以下属性来控制错误提示。参考:菜鸟教程
属性 | 描述 |
---|---|
errorClass | 类型 String,默认 “error”。指定错误提示的 css 类名,可以自定义错误提示的样式。 |
errorElement | 类型 String,默认 “label”。指定使用什么标签标记错误。 |
wrapper | 类型 String,指定使用什么标签再把上边的 errorELement 包起来。 |
errorLabelContainer | 类型 Selector,把错误信息统一放在一个容器里面。 |
showErrors | 跟一个函数,可以显示总共有多少个未通过验证的元素。 |
errorPlacement | 跟一个函数,可以自定义错误放到哪里。 |
highlight | 可以给未通过验证的元素加效果、闪烁等。 |
设置默认配置
jQuery.validator.setDefaults()
参考资料
jQuery Validation Plugin 官网
jQuery Validation Plugin 文档
Github 下载地址
jQuery Validate | 菜鸟教程
以上是关于jQuery - 学习笔记 - jQuery Validation Plugin的主要内容,如果未能解决你的问题,请参考以下文章