jquery最常用的场合就是表单验证。validation则是历史最悠久的jquery插件之一。分为内置验证规则，和自定义验证规则。信息提示明确——可以通过keyup,focus等方式完成实时验证。
本笔记跟随原书采用validation 1.9版
1.快速上手
validation基本规则如下：（相关内容可通过ctrl+f查找源文件得到）
资料来源：//www.cnblogs.com/si-shaohua/p/3760286.html>
【例7.1】
制作一个表单，包括用户名，邮箱，网址（非必填），和评论。要求能够输入验证。
思路：
（1）对于姓名一栏中长度至少为2位（minlength=2）
（2）电子邮件一栏需要加上.email类
（3）网址加上.url类
（4）对于必填字段全部加上class=required;
html
一个简单带验证提示的评论 name*
email*
webcite
comment*
补充css样式（对功能无影响）
* { font-family: verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; }
最后还不要忘记对插件库的调用，
jq调用
$(document).ready(function(){ $(#commentform).validate();});
效果如下：
【初步小结插件的使用方法】
（1）引入插件
（2）确定需求：哪些需要用才加
（3）指定验证规则。
（4）如果我们想汉化这个插件，只需要修改插件中的message消息(注意和验证规则对应)：
jquery.extend(jquery.validator.messages, { required: 必选字段, remote: 请修正该字段, email: 请输入正确格式的电子邮件, url: 请输入合法的网址, date: 请输入合法的日期, dateiso: 请输入合法的日期 (iso)., number: 请输入合法的数字, digits: 只能输入整数, creditcard: 请输入合法的信用卡号, equalto: 请再次输入相同的值, accept: 请输入拥有合法后缀名的字符串, maxlength: jquery.validator.format(请输入一个 长度最多是 {0} 的字符串), minlength: jquery.validator.format(请输入一个 长度最少是 {0} 的字符串), rangelength: jquery.validator.format(请输入 一个长度介于 {0} 和 {1} 之间的字符串), range: jquery.validator.format(请输入一个介于 {0} 和 {1} 之间的值), max: jquery.validator.format(请输入一个最大为{0} 的值), min: jquery.validator.format(请输入一个最小为{0} 的值)});
2.改进
上面的例子对于最短字段采用了minlength=2这样的属性方法。而对开发者来说最友好的事情，应该是把所有的验证规则要么全放class要么全放属性中。
（1）再引一个插件——jquery.metadata.js
(从这个插件能查到的资料来看，大多数都是和表单验证一起用)
（2）改变jq的调用方法：
$(document).ready(function(){ $(#commentform).validate({meta:'validate'});});
（3）验证规则全部写到class属性里去！
比如说：
把class=required minlength=2写成：class={validate:{required:true，minlength:2}}.只要是插件相关的，全部改成复合对象的形式：
一个简单带验证提示的评论 name*
email*
webcite
comment*
效果和之前完全一致。
3.改进（第二种）：通过name来验证
键入繁琐的class是多数人不喜欢的。下面从js层面研究如何实现一样的效果。把class都删了：
$(function(){ $('#commentform).validate({ rules:{//定义rules属性 username:{//通过name来匹配验证属性规则 required:true; minlength:2; }，email{ required:true; email:true; }，url:url, comment:required; } }) })
4.自定义插件
（1）更推荐的方法
除了从源码上汉化之外，更推荐在调用class时完成一整套规则。比如姓名验证一栏中，class改写为：
class={validate:{required:true,minlength:2,messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}
（2）如果需要在验证信息中添加图片
在js文件中键入代码：
$(document).ready(function(){ $(#commentform).validate({ rules: { username: { required: true, minlength: 2 }, email: { required: true, email: true }, url:url, comment: required }, messages: { username: { required: '请输入姓名', minlength: '请至少输入两个字符' }, email: { required: '请输入电子邮件', email: '请检查电子邮件的格式' }, url: '请检查网址的格式', comment: '请输入您的评论' }, errorelement: em, //可以用其他标签，记住把样式也对应修改 success: function(label) { //label指向上面那个错误提示信息标签em label.text( ) //清空错误提示消息 .addclass(success); //加上自定义的success类 } }); });
同时在css中追加样式：
em.error { background:url(../images/unchecked.gif) no-repeat 0px 0px; padding-left: 16px;}em.success { background:url(../images/checked.gif) no-repeat 0px 0px; padding-left: 16px;}
效果图：
（3）规则的自定义
评论功能还有一个重要部分是验证码,验证码通常有后台生成，在这里直接模拟。
在html的表现是：
验证码 =1+1
在$(#commentform).validate(）方法上面定义验证规则：
使用$.validator.addmethod('方法名',function(值,对象,param)）定义
//自定义一个验证方法 $.validator.addmethod( formula, //验证方法名称 function(value, element, param) {//验证规则 return value == eval(param); }, '请正确输入数学公式计算后的结果'//不成功则出现验证提示信息 );
跟其他规则一样,在rules里面,根据name调用对象：
valcode: { formula: 1+1 }
效果如下：
代码清单
jq
$(document).ready(function(){ //自定义一个验证方法 $.validator.addmethod( formula, //验证方法名称 function(value, element, param) {//验证规则 return value == eval(param); }, '请正确输入数学公式计算后的结果'//验证提示信息 ); $(#commentform).validate({ rules: { username: { required: true, minlength: 2 }, email: { required: true, email: true }, url:url, comment: required, valcode: { formula: 1+1 } }, messages: { username: { required: '请输入姓名', minlength: '请至少输入两个字符' }, email: { required: '请输入电子邮件', email: '请检查电子邮件的格式' }, url: '请检查网址的格式', comment: '请输入您的评论' }, errorelement: em, //用来创建错误提示信息标签 success: function(label) { //验证成功后的执行的回调函数 //label指向上面那个错误提示信息标签em label.text( ) //清空错误提示消息 .addclass(success); //加上自定义的success类 } }); });
二. jquery表单插件——form
jquery form插件是一个优秀的ajax表单插件，可以非常容易地、无侵入地升级html表单以支持ajax。jquery form有两个核心方法 -- ajaxform() 和 ajaxsubmit()， 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法： formtoarray()、formserialize()、fieldserialize()、fieldvalue()、clearform()、clearfields() 和 resetform()等。
调试需要服务器环境的支持。笔记跟随原书使用2.95版
1.快速上手
【例7.2】
一个表单，包括名字，地址，自我介绍，被提交时传送到demo.php中，如果返回成功则收到“提交成功！”的信息。
————准备工作
在页面引入插件：
html结构为：
名称：
地址：
自我介绍：
demo.php初始化内容为：
在js文件中：
$(function(){ //绑定一个id为myform的表单并提供一个回调函数 $('#myform').ajaxform(function(){ $('#output1').html('提交成功！').show(); }); return false;//阻止表单默认提交})
通过form插件的两个核心方法，都可以在不修改表单的html代码结构的情况下，轻易地将表单的提交方式升级为ajax提交方式。另一个核心方法ajaxsubmit()也能完成同样的功能。
$(function(){ //绑定一个id为myform的表单并提供一个回调函数 $('#myform').ajaxsubmit(function(){ $('#output1').html('提交成功！').show(); }); return false;//阻止表单默认提交})
2.两个核心方法的参数
ajaxform() 和 ajaxsubmit() 都能接受0个或1个参数，当为单个参数时，该参数既可以是一个回调函数，也可以是一个options对象，上面的例子就是回调函数，下面介绍options对象，使得它们对表单拥有更多的控制权。
1. var options = { 2. target: '#output', //把服务器返回的内容放入id为output的元素中 3. beforesubmit: showrequest, //提交前的回调函数 4. success: showresponse, //提交后的回调函数 5. //url: url, //默认是form的action， 如果申明，则会覆盖 6. //type: type, //默认是form的method（get or post），如果申明，则会覆盖 7. //datatype: null, //html(默认), xml, script, json...接受服务端返回的类型 8. //clearform: true, //成功提交后，清除所有表单元素的值 9. //resetform: true, //成功提交后，重置所有表单元素的值 10. timeout: 3000 //限制请求的时间，当请求大于3秒后，跳出请求 11. } 13. function showrequest(formdata, jqform, options){ 14. //formdata: 数组对象，提交表单时，form插件会以ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}] 15. //jqform: jquery对象，封装了表单的元素 16. //options: options对象 17. var querystring = $.param(formdata); //name=1&address=2 18. var formelement = jqform[0]; //将jqform转换为dom对象 19. var address = formelement.address.value; //访问jqform的dom元素 20. return true; //只要不返回false，表单都会提交,在这里可以对表单元素进行验证 21. }; 23. function showresponse(responsetext, statustext){ 24. //datatype=xml 25. var name = $('name', responsexml).text(); 26. var address = $('address', responsexml).text(); 27. $(#xmlout).html(name + + address); 28. //datatype=json 29. $(#jsonout).html(data.name + + data.address); 30. }; 32. $(#myform).ajaxform(options); 34. $(#myform2).submit(funtion(){ 35. $(this).ajaxsubmit(options); 36. return false; //阻止表单默认提交 37. });
表单提交之前进行验证： beforesubmit会在表单提交前被调用，如果beforesubmit返回false，则会阻止表单提交。
3.表单提交之前的验证
利用beforesubmit的特性，当返回为false时，阻止提交。可以定义一个validate函数，作为beforesubmit的值：
1. beforesubmit: validate 2. function validate(formdata, jqform, options) { //在这里对表单进行验证，如果不符合规则，将返回false来阻止表单提交，直到符合规则为止 3. //方式一：利用formdata参数 4. for (var i=0; i tr:odd').addclass('odd'); $('tbody>tr:even').addclass('even'); $('tbody>tr').click(function(){ if($(this).hasclass('selected')){ return false; }else{ $(this).siblings().removeclass('selected'); $(this).addclass('selected'); } })})
试用插件的写法实现上述功能。插件方法取名为tablestriped
思路：要通过`对象.tablestriped()方法应该有一个参数options，options参数是一个对象。你可以通过设置参数的属性来规定你要给它加上那种class，表述为options.odd，options.even,options.selected。
;(function ($) { jquery.fn.extend({ 'tablestriped':function(options){ options=$.extend({ odd:'odd', even:'even', selected:'selected' },options); } })})(jquery);//立即调用！
框架已经打好，接下来就是选择元素，应该使用$(选择器,this)表述只在匹配与元素内进行操作。函数应该是可链的，所以最后应该返回this。
;(function ($) { jquery.fn.extend({ 'tablestriped':function(options){ //参数框架 options=$.extend({ odd:'odd', even:'even', selected:'selected' },options); //具体方法： $('tbody>tr:odd',this).addclass(options.odd); $('tbody>tr:even',this).addclass(options.even); $('tbody>tr',this).click(function(){ if($(this).hasclass(options.selected)){ return false; }else{ $(this).siblings().removeclass(options.selected); $(this).addclass(options.selected); } }) return this;//使方法可链 } }) })(jquery);//立即调用！
在验证中，可以通过$('table').tablestriped(参数)来实现题目的效果。如果我不想使用.odd、.even、。selected这种名称的样式，可以重新传入一个对象：
$('table').tablestriped({odd:'haha',even:'hehe',selected:'hoho'});
上述代码表示在所有table中，对奇数序列odd的行（2,4,6...）使用.haha样式，...一次类推。
注意：在前面提到的几个要点里，元素应该是允许遍历的。简单的说，就是内部对象可能不是一个单独的对象，也有可能是多个。
;(function ($) { jquery.fn.extend({ 'someplugin':function(options){ return this.each(function(){ //代码 }) } })})(jquery);//立即调用！
（2）怎样封装全局函数插件
因为全局函数之前已经经过封装，因改起来很简单，把函数放到jquery命名空间下就可以。
;(function($){ $.extand({ 属性名:function(){ //待封装函数代码 })})(jquery)
写插件时注意不要把内容写死。
（3）自定义选择器
想自定义选择器，首先得了解jquery选择器的机制：通过正则表达式来解析，然后针对解析出来的选择符执行一个函数。——称为选择器函数。现在以:lt()为例说明jquery选择器函数的特性。
$('div:lt(3)')表示选取div索引值小于3的所有div元素（大于用:gt()）。分析:lt()jquery源码：
gt:function(a,i,m){ return i
i表示当前遍历到dom的索引值
m是一个数组，也是选择器函数的最重要部分。拿$('div:lt(3)')来说：
m[0]表示:lt(3)这部分。
m[1]表示冒号
m[2]决定了用那个选择器函数，在例子只带lt
m[3]指代括号内的数字。
【例7.8】在jquery的空间内写一个between选择器，选取目标元素索引值在一定范围之间的所有元素。
;function($){ $.extend($.expr[':'],{ between:function(a,i,m){ var tmp=m[3].split(','); return tmp[0]-0
接下来依样画葫芦，把i的取值范围返回出去就行了。（tmp-0表示通过一个简单运算把字符串转换为数字。）
选择器仅仅是$.expr[':']的一部分，不能独立存在。