jQuery plugin Validation的7个Callback介绍
来源:互联网 发布:windows.old还原win10 编辑:程序博客网 时间:2024/06/05 01:10
Validation是jQuery的一个很强的验证用户输入的plugin,功能强就算了,还非常的有弹性,可以客制非常多的东西,这次要介绍的是7个Callback使用,让用Validation更随心所欲。
$("form").validate({ rules:{test1:{required:true},test2:{required:true}}, submitHandler:function(form){ //在Submit之前,且所有驗證成功。 //可以在這裡改成用$.ajax()送出。 $("#summary").html(""); return false; }, invalidHandler:function(form){ //在Submit之前,且驗證失敗。 $("#summary").fadeOut().fadeIn(); }, success:function(error){ //單項證驗成功,參數是錯誤Element //這callback也可以是文字,如果是文字會在error上加上class error.addClass('valid').text('OK'); }, highlight:function(element, errorClass, validClass){ //單項證驗失敗,參數是驗證對向 $(element).addClass(errorClass).removeClass(validClass); $(element).fadeOut().fadeIn(); }, unhighlight:function(element, errorClass, validClass){ //單項證驗成功,參數是驗證對向 $(element).removeClass(errorClass).addClass(validClass); }, showErrors:function(){ //訊息顯示的Callback,名字取得不好,不是發生錯誤才會呼叫,而是只要有事件發生都會被呼叫,包含驗證成功。 $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below."); //不呼叫defaultShowErrors其他如highlight,unhighlight等方法是不會被呼叫的 this.defaultShowErrors(); }, errorPlacement:function(error, element){ //錯誤element的加入function //如果不想放在正後方可以加這個callback error.appendTo(element.parent('td').next('td')); }});
<form> <table> <tr> <th>Test1 : </th> <td><input type='text' name='test1' /></td> <td></td> </tr> <tr> <th>Test2 : </th> <td><input type='text' name='test2' /></td> <td></td> </tr> <tr> <th colspan='3'><input type='submit'></th> </tr> <tr> <th colspan='3'><div id="summary"></div></th> </tr> </table> <form>
Callback说明默认值submitHandler在Submit之前,且所有验证成功,可以在这里改成用$.ajax()送出。default (native) form submitinvalidHandler在Submit之前,且验证失败。沒有success单项证验成功,参数是error,不是验证的对向,也可以是文字,如果文字会加入error的class中。"valid"highlight单项证验失败,参数是验证对象function(element, errorClass, validClass){
element.addClass(errorClass).removeClass(validClass)
}
unhighlight单项证验失败,参数是验证对象function(element, errorClass, validClass){element.addClass(validClass).removeClass(errorClass)
}
showErrors信息显示的Callback,名字取得不好,不是发生错误才会呼叫,而是只要有事件发生都会被呼叫,包含验证成功。defaultShowErrorserrorPlacementerror 元素的加入functionfunction (error,element){element.after(error);
}
注1:这7个Callback都有默认值,覆写后像highlight,就会没有原本的效作,如果要保留原效果请加上原本的Code
注2:参数不是文字就是jQuery的Object。
submitHandler
发生时机:按下submit后,执行验证,所以验证都成功,在呼叫form.submit之前。
$("form").validate({ submitHandler:function(form){ //可以在這裡改成用$.ajax()送出。 $.post(url,data,successCallback); return false; //回傳false會阻止原本的form submit。 } });
invalidHandler
发生时机:按下submit后,执行验证,发生错误时。
$("form").validate({ invalidHandler:function(form){ $("#summary").fadeOut().fadeIn(); } });
success
发生时机:每一个验证对向验证成功时。
注意:参数是error,也就是通知在验证对向后方的错误讯息。
$("form").validate({ success:function(error){ //因為success,如果是文字時代表error的成功時的className,改成function時className就要寫死了。 //不像highlight,className寫在validClass、errorClass變數中 //增加OK文字 error.addClass('valid').text('OK'); }});
highlight
发生时机:每一个验证对向验证失败时。
$("form").validate({ highlight:function(element, errorClass, validClass){ //因為覆寫,要自己加上預設效果 $(element).addClass(errorClass).removeClass(validClass); //增加fadeOut、fadeIn的效果 $(element).fadeOut().fadeIn(); }});
unhighlight
发生时机:每一个验证对向验证成功时。
$("form").validate({ unhighlight:function(element, errorClass, validClass){ //因為覆寫,要自己加上預設效果 $(element).removeClass(errorClass).addClass(validClass); }});
showErrors
发生时机:每一次发生验证时,包含成功或失败,我个人觉得改名成showMessages或renderMessages比较直觉点。
$("form").validate({ showErrors:function(){ //增加錯誤的摘要 $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below."); //不呼叫defaultShowErrors其他如highlight,unhighlight等方法是不會被呼叫的 this.defaultShowErrors(); }});
errorPlacement
发生时机:为每个验证对向填加error时,不想加到正后方可覆写此function。
$("form").validate({ errorPlacement:function(error, element){ //加到下一個td中 error.appendTo(element.parent('td').next('td')); }});
- jQuery plugin Validation的7个Callback介绍
- jQuery plugin Validation Callback使用
- jQuery plugin: Validation 使用说明
- jQuery plugin: Validation 使用说明
- jQuery plugin: Validation 使用说明
- jQuery plugin: Validation 使用说明
- jQuery plugin: Validation 使用说明
- jQuery Validation Plugin学习
- jquery validation plugin 使用
- jquery validation plugin
- jquery插件-validation plugin
- JQuery 插件 Validation Plugin
- jQuery Validation Plugin
- jQuery Validation Plugin
- 客户端验证:JQuery Validation Plugin
- from表单验证的jQuery Validation Plugin的参考文章
- jQuery Validation PlugIn的使用方法及样例
- 表单验证插件 jQuery plugin: Validation
- DB2中SQLSTATE=57016 SQLCODE=-668,原因码 "7"的解决
- 基础python学习视频连接
- 从程序员到CTO的Java技术路线图
- 第九次实验任务
- 进程的创建与可执行程序的加载
- jQuery plugin Validation的7个Callback介绍
- Hibernate的实体类中为什么要继承Serializable?
- Xoreax IncrediBuild 4.60
- SQL树形数据的一种解决方法
- Oracle命令--alter 操作
- IOS成长之路-使用系统默认声音、震动
- Oracle命令--update操作
- 第九次上机报告
- XFire WebService 服务