validation插件的使用

两个概念:
method:验证方法,指的是校验的逻辑
rule :验证规则,指的是元素和验证方法的关联
validate()方法:validation插件的核心方法,定义了基本的校验规则和一些有用的配置项。
如:debug参数设置为true,则表单不会提交,只进行检查,用于调试。

validation插件的基本验证方法之一:
1、required:必填校验(true表示必填)
2、remote:远程校验,用于通过访问服务器来校验数据的有效性;
如校验用户名是否存在
remote用法:
1、remote使用get请求访问服务器
访问服务器后返回校验结果:正常的时候返回true,检验不通过的时候返回错误提示信息
remote:url
2、remote使用post请求访问服务器
remote:{
url:请求地址
type:请求类型post/get
data:{
需要传递的参数
}
}

validation插件的基本验证方法之二:
长度校验:
3、minlength:最小长度验证
4、maxlength:最大长度验证
5、rangelength:长度范围,
如:rangelength:[minlength,maxlength]可用于代替minlength和maxlength
数值校验
6、min:数值最小值校验
7、max:数值最大值校验
8、range:数值范围校验,
range:[min,max]可代替min和max
PS:以上验证方法的值都为数字

validation插件的基本验证方法之三:
9、email:Email格式校验
10、url:url格式校验,需要带“http://”或“https://”等前缀
11、date:日期校验,使用的是js的date类型,只要能被Date.parse识别的都是有效的
12、dateISO:ISO日期校验,格式必须为yyyy/MM/dd或yyyy-MM-dd的
PS:以上验证方法的值都是boolean类型,true表示进行验证

validation插件的基本验证方法之四:
13、number:数字验证,任意整形、非整形、负数、整数皆可
14、digits:整数验证,必须为大于等于0的数字
PS:以上验证方法的值为boolean,true表示进行验证
15、equalTo:与另一个元素值相等验证,值为选择器,表示是和那一个元素的值比较
如:equalTo:"#password",表示用当前元素的值和id="password"元素的值相比较

$("#form").valid()?"correct":"error"; //valid()方法:检查表单或某些元素是否有效,返回值为boolean型,
全部通过检查规则返回true,只要有不通过的检查规则都返回false

rules只针对表单里的元素,而不是某个整个表单(会抛出错误)
1.可以使用rules("add",{})的方法来为元素添加规则,如:
$("#username").rules("add",{minlength:2,maxlength:10})
2.可以使用rules("remove",{})的方法来为元素去掉规则,如:
$("#username").rules("remove","email")
3.可以使用rules()无参数的方法来获取规则
valid()方法
检查表单或者某些元素是否有错误
$("#form").valid();返回值为布尔型;

validate方法返回Validator对象,Validator对象的方法如下:
1、Validator.form():验证表单是否有效,返回true/false;
2、Validator.element(element):验证某个元素是否有效,返回true/false;
如:validator.element("#username")
3、Validator.resetForm():把表单恢复到验证前原来的状态,会清除显示的验证错误信息
4、Validator.showErrors(errors):针对某个元素显示特定的错误信息
如:Validator.showErrors({username:"xxxxxx",passworld:"xxxxx"}),新的错误信息会立即显示
5、Validator.numberOfInvailds():返回无效(即没通过验证的)的元素数量

Validator对象的静态方法:
1、jQuery.validator.addMethod(name,method[,message]):增加自定义的验证方法
2、jQuery.validator.format(template,argument,argumentN...):格式化字符串,用参数代替模板中的{n}
如:var template=$.validator.format("{0}-{1}-{2}");
template("你","我","他")或template(["你","我","他"])则输出"你-我-他",参数个数不够则会输出{n}来代替
3、jQuery.validator.setDefaults(options):修改插件默认设置
如:$.validator.setDefaults({debug:true});表示给所有的表单都设置
4、jQuery.validator.addClassRules(name,rules):为某些class属性值包含name的元素增加组合(批量)验证规则
如:$.validator.addClassRules({text:{required:true,minlength:5}});表示给class="text"的元素添加验证规则

validate()方法配置项一:
--submitHandler:通过验证后运行的函数,可以加上表单的提交方法
submitHandler:function(form){
//提交表单或者其他的操作都可以,参数form是表单的document对象
form.submit();//提交表单,$(form).submit();//不能提交成功
}
--invalidHandler:无效表单提交后运行的函数
如:invalidHandler:function(event,validator){
//event:无效验证触发的事件
//validator:对象
}
也可以写事件来触发invalidHandler的event事件,如:
$("#form").on("invalid-form",function(event,validator){
})
--ignore:对某些元素不进行验证
--rules:定义校验规则
--messages:定义提示信息
groups:对一组元素的验证,用一个错误提示,用errorPlacement控制把错误信息放在哪里

rules中的校验方法都可以定义depends属性,表示当条件满足时返回true,则执行校验方法
针对参数为boolean类型的校验方法:
required:{
//只有depends:function(element)返回true,required校验方法才起作用
depends:function(element){
//:filled是Validation自带的选择器,匹配填写内容的元素
return $("#password").is(":filled")
}
}
针对参数为非boolean类型的校验方法如下:
maxlength:{
param:2
//只有depends:function(element)返回true,maxlength校验方法的值才设置为2
depends:function(element){
//:filled是Validation自带的选择器,匹配填写内容的元素
return $("#password").is(":filled")
}
}
}

groups的使用如下:
groups:{login:"username password confirm-password"} //对一组元素进行验证
errorPlacement:function(error,element){ //对一组元素验证后错误信息显示
error.insertBefore("#info");//将一组元素的错误信息都显示在id="info"的元素上
}

validate()方法配置项
onsubmit:是否在提交时验证,默认值为true

onfoucusout:是否在获取焦时验证

onkeyup:是否在敲击键盘时验证

onclick:是否在鼠标点击时验证,一般用于checkbox或者radio

focusInvalid:提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的 表单)是否会获得焦点

focusCleanup:当未通过验证的元素获得焦点时,是否移除错误提示

errorClass:指定错误提示的css类名,可以自定义错误提示的样式

validClass:指定验证通过的css类名

errorElement:使用什么标签标记错误

wrapper:使用什么标签把上边的errorElement包起来

errorLaberContainer:把错误信息统一放在一个容器里面

errorContainer:显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏。

validate()方法配置项之四:
1、showErrors:可以显示总共有多少个未通过验证的元素
如:showErrors:function(errorMap,errorList){
errorMap:元素信息和错误信息的键值对
errorList:元素信息、错误信息、验证方法等信息列表
this.defaultShowErrors();//使用默认的错误提示信息展示方式,需要这个否则错误信息不显示了
}
2、errorPlacement:自定义错误信息放在哪里,配合groups一起使用
3、success:要验证的元素通过验证后的动作
如:success:"right" 或 success:function(label){label.addClass("right")}
效果是给错误信息展示label元素的class属性值追加right值
4、highlight:可以给未通过验证的元素加效果
如:highlight:function(element,errorClass,validClass){
//element:绑定验证的元素
//errorClass:验证错误信息展示label的class属性值
//validClass:验证通过信息展示label的class属性值
}
5、unhighlight:去除未通过验证的元素的效果,一般和highlight同时使用,同上

注意:success主要针对label元素,highlight主要针对input元素
highlight和unhighlight主要用在单项验证时

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • HTML表单 在HTML中,表单是 ... 之间元素的集合,它们允许访问者输入文本、选择选项、操作对象等等,然后将...
    兰山小亭阅读 3,408评论 2 14
  • Laravel Validation Laravel’s base controller class use a ...
    xiaojianxu阅读 17,603评论 0 1
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,716评论 2 17
  • 佛与魔 仅隔着 一个胳肢窝 就像 正与邪 仅隔着 一条小河 它又似 所罗门国王封印用的 那张膜 举起胳膊 手握的 ...
    卿真阅读 208评论 0 0
  • 昨天我去补鞋那里给新买的鞋子上绳子。我去到补鞋店时。补鞋子的阿姨正忙着给客人补裤子。 阿姨正在补的那条裤子的主人应...
    阿弥陀佛深呼吸阅读 1,187评论 0 1