jQuery插件——Validation Plugin表单验证

jQuery表单验证插件:https://plugins.jquery.com/tag/validate/

jQuery Validation插件是最常用的插件之一:http://jqueryvalidation.org/

一、基本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次,提交前的客户端验证,提交后在服务器端再次进行验证,保证数据的合法性。

服务器端不要相信任何从客户端传过来的数据。

时间: 2024-10-03 19:08:52

jQuery插件——Validation Plugin表单验证的相关文章

jQuery插件—validation实现表单校验

效果展示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>标题</title> 6 <script type="text/javascript" src="js/jquery-3.4.1.js"></script> 7

jquery.validation.js 表单验证

jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 一导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jq

jQuery Validation Engine 表单验证

功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+ 版本: jQuery v1.7+ jQuery Validation Engine v2.6.2 相对 2.2.4 版本的一些区别: 部分参数功能发生变化: 输入控件可以不写 id 属性: 参数 onSuccess 和 onFailure 改为

jQuery html5Validate基于HTML5表单验证插件

一.前言 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构 可用性 当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证 验证驱动验证信

jquery 一个简单的表单验证实例

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

validation统一表单验证(含自定义枚举验证)

一般我们对前端传输的参数做判断时,可能都是以以下方式进行判断,如果再加上字段的长度.正则等校验的话就会显得代码很累赘了. // 新增/修改通用参数非空校验 if (StringUtil.isBlank(menu.getParentId())) { throw new LsException(ResultEnum.PARAM_MISSING_ERROR, "父级菜单ID不能为空!"); } if (StringUtil.isBlank(menu.getMenuName())) { thr

jQuery学习(八)——使用JQ插件validation进行表单校验

1.官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 目录结构: 2.引入jquery库和validation插件 复制dist文件夹下的 和localization文件夹下的 放到WEB项目的js文件夹下提供使用 注意:validate是jQuery插件,必须在jQuery的基础上进行运行,导入顺序是jQuery库,validate库和国际化资源库(可选) 1 <!--依赖的JQuery库--> 2 <

jquery.validation.js 表单验证 完整例子使用

1 <form id="registerform" method="get"> 2 <table> 3 <tbody> 4 <tr> 5 <td class="w140"><i class="mark orange">*</i>邮箱:</td> 6 <td class="w348"><input

一款基于jQuery的带Tooltip表单验证的注册表单

今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQuery表单实现非常简单,使用起来相对比较轻巧. 在线预览   源码下载 这款插件js要引用jquery.js库,还有一个easyform.js 库. html代码部分如下: <div class="form-div"> <form id="reg-form&q