博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery插件——Validation Plugin表单验证
阅读量:5109 次
发布时间:2019-06-13

本文共 3753 字,大约阅读时间需要 12 分钟。

jQuery表单验证插件:https://plugins.
 
jQuery Validation插件是最常用的插件之一:
 
一、基本API
 
rules里面的“username”是input中的“name”,不是“id”。
表单验证,主要是俩:一是规则,二是提示信息
 
当在使用validate插件的时候:
使用validate()方法的时候将debug设置为true,那么表单不会提交,只进行检查,调试时比较方便
 
validate()方法是validate插件中 的核心方法<br>
基本的验证方法有required:true, 必填 remote:"url地址" 去该地址远程校验 minlength 最小长度 maxlength 最大长度 rangelength 长度范围 min最小值 max最大值 range值范围 email Email格式 url URL格式 date 日期 dateISO ISO日期 number 数字 digits 整数 equalTo 与另一个元素值相等
 
配置项 remote 远程校验 -- 可用于发送数据到服务器进行校验
-- 可以是 get请求 即 remote :url 便可发送当前信息至该url进而获取信息      -- 也可以是 post请求 即 remote : {url: url,type: .., data :所要发送的信息} 即发送当前信息以及data中的信息至 url
 
二、基本API(2)
 
rangelength长度范围:是以数组的方式。例如[2,10]
min和minlength的区别:叫length代表是长度,不加length代表的是它的值,也就是值的范围要注意。
 
设置:email,url,date,dateISO:true
url:校验要加http://或https://
dateISO: yyyy-mm-dd 或 yyyy/mm/dd格式
 
number:true 提示输入必须为数字
digits:true 提示输入必须为非负整数
equalto:"#password" 密码确认
比如确认密码的制作equalTo:"选择器"(密码校验)  “#password"
 
三、高级API
 
△rules()方法
(只针对表单里的元素,而不是某个整个表单)
1.可以使用rules("add",{})的方法来为元素添加规则,如:
$("#username").rules("add",{minlength:2,maxlength:10})
2.可以使用rules("remove",{})的方法来为元素去掉规则,如:
$("#username").rules("remove","email")
 
使用valid方法可以来实现对表单的检查:
$("#bt1").bind("click",function(){
alert($("#demoForm").valid()?"填写正确":"填写错误");
})
 
validator对象方法
validate方法返回Validator对象,validator对象有很多有用的方法:
validator.form()验证表单是否有效,返回TRUE/false
validator.element(element)验证某个元素是否有效,返回TRUE/false
validator.resetform()把表单恢复到验证前原来的状态
validator.showErrors(errors)针对某个元素显示特定的错误信息(自定义校验中可以使用)
validator.numberOfInvalids()返回无效的元素数量(正确返回0)
 
validator对象静态方法,可以直接使用
$.validator.addMethod(name,method[,message])增加自定义的验证方法
$.validator.format(template,argument,argumentN...)格式化字符串,用参数代替模板中的{n}
$.validator.setDefaults(options)修改插件默认设置
$.validator.addClassRules(name,rules)为包含class属性名批量增加验证类型
 
validate()方法配置项
validate()方法配置项是validate插件的核心内容
 
submitHandler通过验证后运行的函数,可以加上表单提交方法
invalidHandler无效表单提交后运行的函数
ignore对某些元素不进行验证
rules定义校验规则
messages定义提示信息
groups对一组元素的验证,用一个错误提示,用errorPlacement控制把出错信息放在那实例调用:
submitHandler:function(from){
//表单提交的方式
from:submit();//$(form).Ajax.submit();//$ajax等方式提交表单
}
 
invalidHandler:function(event,validator){ //event:无效验证触发的事件 //validator:对象
 
}也可以写一个事件来触发
$("选择器属性值").on("事件名",function(event,validator)){
 
});
 
ignore:"#hh" 对类hh不进行校验
 
每个rules的配置方法都有一个默认depends:function(element){条件},表示当函数满足条件时,才开始检验该配置方法<br>
当配置方法有参数时可为该方法添加参数param:x,当depends中函数满足条件时才传入参数进行配置
 
groups:{login:"username password confirm-password"} //对一组元素进行验证
errorPlacement:function(error,element){ //对一组元素验证后错误信息显示
error.insertBefore("#info");
}
 
validate()方法配制项
onsubmit是否在提交时验证
onfocusout是否在获取焦点时验证
onkeyup是否在敲击键盘时验证
onclick是否在鼠标点击时验证,一般用于checkbox或者radio
focusInvalid提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)是否会获
得焦点
focusCleanup当未通过验证的元素获得焦点时,是否移除错误提示
errorClass指定错误提示的css类名,默认为error,可以自定义错误提示的样式,当然类名也可以自定义设置
validClass指定验证通过的css类名 道理同上
errorElement使用什么标签标记错误 (如用<li>标记)
wrapper使用什么标签把上边的errorElement包起来 (如用<ul>包裹)
errorLabelContainer把错误信息统一防在一个容器里面 (如放在类或id选择器中)
errorContainer显示或者隐藏验证信息,可以自动实现由错误信息出现时把容器属性变为显示,无错误时隐藏(一般同时使用和上面3个或上面3个同时使用)
 
showError可以显示总共有多少个未通过验证的元素
showErrors:function(errorMap,errorList){
可以添加自定义错误方式
this.defaultShowErrors();//系统默认的错误信息展示方式
}
errorMap,errorList区别:list比map更详细,map可以直接自定义信息,list可以用来分析错误信息
 
errorPlacement自定义错误信息放到哪里
success要验证的元素通过验证后的动作(主要针对的是label元素)
 
highlight可以给未通过验证的元素加效果(主要针对表单t元素)
unhighlight去除未通过验证的元素的效果,一般和highlight同时使用
 

选择器扩展:

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

 
四、 自定义验证方法
 
$.validator.addMethod(name,.method[,message])
name:方法名称
method:function(value,element,params)方法逻辑
message:提示消息
this.optional(element)意思填写值了才会验证,加上这个之后最好设置require,否则这个验证不会被执行
 
additional-methods.js包含了很多扩展验证方法。在写自定义方法时可以参考这个js库
 
所有提交的表单数据,都必须验证2次,提交前的客户端验证,提交后在服务器端再次进行验证,保证数据的合法性。
 
服务器端不要相信任何从客户端传过来的数据。

转载于:https://www.cnblogs.com/d-lion/p/5801044.html

你可能感兴趣的文章
Ubuntu下安装MySQL及简单操作
查看>>
前端监控
查看>>
clipboard.js使用方法
查看>>
移动开发平台-应用之星app制作教程
查看>>
leetcode 459. 重复的子字符串(Repeated Substring Pattern)
查看>>
伪类与超链接
查看>>
centos 7 redis-4.0.11 主从
查看>>
博弈论 从懵逼到入门 详解
查看>>
永远的动漫,梦想在,就有远方
查看>>
springboot No Identifier specified for entity的解决办法
查看>>
慵懒中长大的人,只会挨生活留下的耳光
查看>>
"远程桌面连接--“发生身份验证错误。要求的函数不受支持
查看>>
【BZOJ1565】 植物大战僵尸
查看>>
视频:"我是设计师"高清完整版Plus拍摄花絮
查看>>
VALSE2019总结(4)-主题报告
查看>>
浅谈 unix, linux, ios, android 区别和联系
查看>>
51nod 1428 活动安排问题 (贪心+优先队列)
查看>>
中国烧鹅系列:利用烧鹅自动执行SD卡上的自定义程序(含视频)
查看>>
Solaris11修改主机名
查看>>
latex for wordpress(一)
查看>>