1、下载地址:http://jqueryvalidation.org/

2、使用方法:

<script type="text/javascript" src="http://www.xftz.cn/templets/yuanyou/js/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
jquery表单对象.validate()

3、validade()方法

作用:验证选中的表单,传入一个配置对象用于对验证进行各种配置。

3.1.1、rules

作用:为各种表单元素添加各种验证规则

类型:object

使用方法:rules:{

    name属性值:{

    验证规则1,

    验证规则2,

    ...

    }...

}

3.1.2、内置的验证规则:

1)、required:必须输入的字段

使用:required:true,如果这个标签只有这一条验证规则,可以简写:name属性值:"required"

2)、minlength:最小字符长度

3)、maxlength:最大字符长度

4)、rangelength:字符长度必须介于某个区间

使用:rangelength:[2,3]

5)、min:输入值被允许的最小值(数字)

6)、max:输入值被允许的最大值(数字)

7)、range:[5,10],输入值必须介于某个区间

8)、number:true,必须是合法的数字

9)、digits:true,必须是整数

10)、email:true,必须是正确的邮箱

11)、url:true,必须是正确的网址

12)、equalTo:jq选择器,输入值必须和给定选择器的值相同

13)、remote:{

      url:"check_email.php",

      type:"post",

      data:{

        username:"xulinjun"

      }

}

使用ajax方法,调用服务器端脚本,验证输入值

14)、extension:限定特定格式的后缀名,多个用"|"隔开,(需要引入additional-methods.min文件)

4、提示信息的汉化

4.1、直接引入汉化包

<script type="text/javascript" src="js/dist/localization/messages_zh.min.js"></script>

4.2、messages

如果需要在validate()方法内修改提示信息,则可以使用本方法,

自定义的提示信息,key:value的形式,key是要验证的元素,value可以是字符串或函数,举例:

messages:{
username:{
required:"必须填写"
},
  username1:{
required:"必须填写",
equalTo:"俩次输入不一致"
}
}
//这里rules上面的值,messages里面可以同步使用,{0}代表第一个,{1}代表第二个...举例:

username:{
  required:"必须填写",
  min:"最小的值必须是{0}"
}

 

5、submitHandler

类型:function(form)

说明,通过验证后运行的函数,默认添加该函数则不会再提交除非手动提交或者使用return true,

函数参数:该函数接收一个参数,表示当前表单dom对象

6、invalidHandler(event,validator)

说明,当一个无效的表单(即验证不通过的时候)被提交的时候触发这个函数

函数参数:当前验证的表单validator对象

7、errorClass(默认值error)

类型:string

说明:指定错误提示与验证不通过的控件的css类名

8、validClass(默认值:valid)

类型:string

在验证成功的控件上加上传入的css类名

9、errorElement(默认值:label)

类型:string

说明:用什么标签标记错误

10、errorPlacement(默认值,在无效的元素之后)

类型:function(error,element)

说明:自定义错误信息放到哪里

11、errorContainer

选择器字符串

说明:有错误信息出现时把选择器匹配的元素变为显示,没有时隐藏。

12、errorLabelContainer

类型:选择器字符串

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

13、wrapper

类型:string

说明:用什么标签再把上边的errorElement包起来

14、success

类型:string or function(label,element){

}

说明:每个字段验证通过执行函数

函数参数:label(信息提示标签的jquery对象),element(当初验证成功的dom元素对象)

如果跟一个字符串,会作为css类加在提示信息的标签上

15、highlight(默认值,添加errorClass到验证失败的表单控件)

类型:function(element,errorClass,vaildClass){

}

说明:传入的函数会在每个控件验证不通过时执行,我们可以通过这个配置属性,给不通过的控件添加效果

函数参数:element(当前未通过验证的dom元素对象),errorClass(错误时给错误提示标签的css类名称),vaildClass(vaildClass属性的当前值)

16、debug(默认值false)

类型:布尔值

设置为true之后则表单不会真正的提交,仅仅是验证

17、ignore(默认值:hidden)

类型:selector

说明:忽略某些元素不验证

三、validator对象

validate方法返回一个validator对象,我们称这个对象为validator对象

常用方法:

1、validator.form()

返回:boolean

验证form返回成功还是失败

2、validator.element()

返回:boolean

验证单个表单验证是成功还是失败

3、validator.resetForm()

把前面验证的form恢复到验证前原来的状态

4、validator.showErrors()

显示特定的错误信息

5、validator.numberOfInvalids()

返回验证不通过的字段数

静态方法:

6、$.validator.setDefaults()

改版默认的设置

7、$.validator.addClassRules()

增加组合验证类型,可以在一个css类里面用多种验证规则

8、$.validator.format()

用参数代表模板中的{n}

四、rules()方法

1、介绍:

查看,新增,移除一个表单控件的验证规则

2、使用:

表单控件.rules()

3、参数:

rules()  返回元素的验证规则

rules("add",rules)  增加验证规则

rules("remove",rules)  删除验证规则,多个验证规则用空格隔开

五、valid()方法

1、介绍

检查表单是否通过

2、使用

表单jquery对象.valid()

六、jquery validation提供的选择器

1、增加的选择器

:blank 选择所有没有值或者值为空白的控件

:filled 选择所有填写了非空值的表单控件

:unchecked 与jquery提供的checked作用相反

最后附上一张效果图:

表单验证插件----jquery validation的更多相关文章

  1. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  2. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  3. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  4. 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  5. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  6. 表单验证插件 jquery.validata 使用方法

    参考资料:http://www.runoob.com/jquery/jquery-plugin-validate.html 下载地址 jquery.validate插件的文档地址http://docs ...

  7. jq中的表单验证插件------jquery.validate

    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...

  8. jquery表单验证插件 jquery.form.js ------转载

    Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...

  9. jquery表单验证插件 jquery.form.js-转

    来自:http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满 ...

随机推荐

  1. UVa 11922 & splay的合并与分裂

    题意: 1个1—n的排列,实现一下操作:将a—b翻转并移动至序列的最后. SOL: splay维护区间的裸题——不过平衡树的题目貌似都是裸的吧...就是看操作的复杂程度罢... 如何取区间呢,我们在s ...

  2. Google Chrome Uncaught TypeError: object is not a function

    <html> <script type="text/javascript"> function testForm(){ alert("hello ...

  3. background常用属性

    background-image:url('图片位置');//设置背景图片的位置 background-repeat:no-repeat;//图片是否重复显示(不重复) background-posi ...

  4. 清空highcharts数据

    1:清空highcharts图表的数据我们常用的方法就是remove() var seriesList = chart.series; //获得图表的所有序列 var seriesCount=seri ...

  5. winform学习之-----小知识(20160624)

    一.//判断是否按下回车键if(e.KeyCode == Keys.Enter){   pictureBoxKeyDownLogin_Click(sender,e);}或是e.KeyCode == K ...

  6. petapoco定制,比较SQL事务,存储过程,分布式事务(MSDTC)的区别和场景

    使用分布式事务时 就锁死了,而且是只锁编辑的行 使用.netSQL事务一定要执行了一个CUD的SQL才会锁死,而且也是锁行,但是也锁读的行 .netSQL事务要在这里才锁死 结论,对于产品要求细粒度的 ...

  7. iOS容易造成循环引用的三种场景

    iOS容易造成循环引用的三种场景  ARC已经出来很久了,自动释放内存的确很方便,但是并非绝对安全绝对不会产生内存泄露.导致iOS对象无法按预期释放的一个无形杀手是--循环引用.循环引用可以简单理解为 ...

  8. EhCache WebCache 与 SpringMVC集成时 CacheManager冲突的问题

    转自:点击打开链接 http://www.cnblogs.com/daxin/p/3560989.html EhCache WebCache 与 SpringMVC集成时 CacheManager冲突 ...

  9. 如何判断js中对象的类型

    1.typeof 形如 var x = "xx"; typeof x == 'string' typeof(x); 返回类型有:'undefined' "string&q ...

  10. mysql体系结构

    mysql逻辑架构: 第一层,即最上一层,所包含的服务并不是MySQL所独有的技术.它们都是服务于C/S程序或者是这些程序所需要的:连接处理,身份验证,安全性等等. 第二层值得关注.这是MySQL的核 ...