jquery 插件之验证表单...
时间：2010-08-18 来源：guixiang155cm
基于jQuery来实现完成表单的验证，可定义验证规则或自定义验证方法。
源码如下;
( function($){ $.fn.extend({ fame: function(){ var r_value = true; var r_hanle = true; if(this.find(":input").size() == 0 ){ return true; } this.find(":input").each(function(){ if($(this).attr("filter") == "true"){ var kinds = $(this).attr("kinds"); var kindsarray = kinds.split(","); var tips = $(this).attr("tips"); var tipsarray = tips.split(","); for(var c in kindsarray){ if(kindsarray[c] == "null"){ $("#tip",$(this).parent()).remove(); if($.del_space($(this).val()) == ""){ $.process_tip($(this),tipsarray[c]); r_value = false; return false; } } if(kindsarray[c] == "integer"){ $("#tip",$(this).parent()).remove(); if(isNaN($(this).val())){ $.process_tip($(this),tipsarray[c]); r_value = false; return false; } } } } }); this.find("*").each(function(){ if($(this).attr("handle") == "true"){ if(r_value){ handle_fn = eval("("+$(this).attr("fn")+")"); r_hanle = handle_fn(); $("#tip",$(this).parent()).remove(); $.process_tip($(this),""); } } }); if(this.find("#tip").size() == 0){ r_value = true; r_hanle = true; } return r_value && r_hanle; } }); $.extend({ process_tip : function(_this, tip){ _this.parent().append("<span id='tip'><font color='red'>"+tip+"</font></span>"); }, del_space: function(src){ var reg = /\s/g; return src.replace(reg, ""); } }); } )(jQuery);
测试代码如下：
<html> <mce:script src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script> <mce:script src="form_pluan.js" mce_src="form_pluan.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#a").submit(function(){ return $($("#a")).fame(); }); }); function sel(){ if($("select:eq(0) option:selected").val() == "-1") { alert("请选择！"); return false; } } // --></mce:script> <body> <form id="a" action=""> <table><tr><td> <input type="text" filter="true" kinds="null,integer" tips="can not be null,must be integer" /></td> </tr> <tr><td> <input type="text" filter="true" kinds="integer,null" tips="must be integer, can not be empty"/> </td></tr> <tr><td> <select handle="true" fn="sel"> <option value="-1">请选择</option> <option value="1">fame</option> <option value="2">fame</option> </select> </td></tr> <input type="submit" id="st" /> </form> </body> </html>
说明:
<form></form>标签中定义<input />标签， 中 定义 filter="true" 表示 需要使用插件来验证， kinds="null" 表示使用非空验证，kinds="integer" 表示验证为数字。也可以多重验证。如：kinds="null,integer" ，中间用“," 分开。tips="msg" 用来表示验证不通过需要显示的提示信息，有多重验证时使用 tips="msg1,msg2" , 中间使用","分开。tips与kinds 想对应。如 <input type="text" filter="true" kinds="null,integer" tips="can not be null, must be integer" /> ,其中 null 对应 can not be null, integer 对应 must be integer.
标签中定义 handle="true" 表示使用自定义方法实现 验证， fn="sel" 其中 sel 是你定义的方法名，在你自定义的方法中必须返回false || true。
页面调用;
写一个表单，在 页面加载完成后，为你所需要验证的表单注册个事件，代码如下：
$("#a").submit(function(){ return $($("#a")).fame(); });
显示如下：
1. kind="null,integer"
2. kind="null,integer"
3. handle="true" fn="sel" 自定义验证方法。用于 下拉框。
许多功能正在完善中。。。
相关阅读 更多 +
