我的JQuery第一个相关代码:表单验证

香水坏坏 发表于 2007-7-7 [Javascript]

i had update the code ,anyone would be help can download by click here.

代码下载点这里
基于JQUERY的表单验证

可验证元素：
input[text,password,file,checkbox,radio]
select
可验证的行为：
空值验证，值长度验证，正则验证，AJAX验证，比较验证
可定义的提示信息：
默认提示信息，正确信息，输入提示信息，错误提示信息，AJAX自定义提示信息

使用方法：
1、 在要验证的元素加入class=”validElement”
2、 加入默认 提示信息 正确信息
3、 初始验证
4、 submit()时验证

PS:时间确实太匆忙了,很多地方还木来得急整理

效果图：

 

 

JavaScript代码
  1. //初始化验证元素的提示信息   
  2. $(".validElement").each(function(){   
  3.    var tip = $( "#"+this["id"]+"Tip" );   
  4.    if ( tip.length == 1 ){   
  5.      tip.html( this["msgtip"] );   
  6.      tip.addClass( "msgNormal" );     
  7.    }   
  8. });   
  9. // 要验证元素ID，最小长度，最大长度 ，是否可为空 ，正则表达式验证 ， 输入时提示信息 ， 错误时提示信息，值为空但允许为空时提示信息，验证成功时调用的外部函数   
  10. function Validator( srcID , min , max , empty ,regex , msgOnTip , msgOnErr , msgOnEmpty , onValid){   
  11. this.min = min||0;   
  12. this.max = max||1000;   
  13. this.empty = empty;   
  14. this.regex = regex||"";   
  15. this.msgOnTip = msgOnTip||"";   
  16. this.msgOnError = msgOnErr||"";   
  17. this.msgOnEmpty = msgOnEmpty||"";   
  18. this.isValid = false;   
  19. this._parent = srcID;   
  20. if ( null!= onValid )   
  21. this.onValid = onValid;   
  22. }   
  23. Validator.prototype.valid = function(){   
  24. var srcCTLWithJQuery = $("#"+this._parent);   
  25. var val = srcCTLWithJQuery.val();   
  26. if ( val.length == 0 && this.empty ){   
  27. this.isValid = true;   
  28. }   
  29. else if ( val.length < this.min || val.length > this.max ){   
  30. this.isValid = false;   
  31. }   
  32. else if ( this.regex != null && this.regex != undefined && typeof this.regex == "string" && this.regex!="" ){   
  33. var exp = new RegExp( "^"+ this.regex+"$" , "i");   
  34. var isTest = exp.test( val );   
  35. if ( !isTest ){   
  36. this.isValid = false  
  37. }   
  38. else{   
  39. this.isValid = true;   
  40. }   
  41. }   
  42. else{   
  43. this.isValid =true;   
  44. }   
  45. }   
  46. Validator.prototype.updateShow =function(){   
  47. var srcCTLWithJQuery = $("#"+this._parent);   
  48. var tip = $( "#"+srcCTLWithJQuery.attr("id")+"Tip" );   
  49. if ( !this.isValid ){   
  50. tip.html( this.msgOnError );   
  51. tip.removeClass();   
  52. tip.addClass( "msgError" );   
  53. }   
  54. else{   
  55. if ( null!= this.onValid )   
  56. this.onValid(srcCTLWithJQuery);   
  57. if ( this.empty && srcCTLWithJQuery.val().length==0 )   
  58. tip.html( this.msgOnEmpty );   
  59. else  
  60. tip.html( srcCTLWithJQuery.attr("msgok") );   
  61. tip.removeClass();   
  62. tip.addClass( "msgOK" );   
  63. }   
  64. }   
  65. function CompareValidator( srcID , desID , msgOnErr ){   
  66. this.base = Validator;   
  67. this.base( srcID , 0,0 ,false ,null ,null , msgOnErr );   
  68. this._compare = desID;   
  69. }   
  70. CompareValidator.prototype.updateShow = Validator.prototype.updateShow;   
  71. CompareValidator.prototype.valid = function(){   
  72. var srcCTLWithJQuery = $("#"+this._parent);   
  73. var desCTLWithJQuery = $("#"+this._compare);   
  74. if ( srcCTLWithJQuery.val() == desCTLWithJQuery.val() ){   
  75. this.isValid = true;   
  76. }   
  77. else{   
  78. this.isValid = false;   
  79. }   
  80. }   
  81. function AjaxValidator( srcID , url , msgOnErr , ajaxCallback ){   
  82. this.base = Validator;   
  83. this.base( srcID , 0,0 ,false ,null ,null , msgOnErr , null );   
  84. this.url = url;   
  85. this.isAjax = true;   
  86. if ( null!= ajaxCallback )   
  87. this.callback = ajaxCallback;   
  88. }   
  89. AjaxValidator.prototype.updateShow = Validator.prototype.updateShow;   
  90. AjaxValidator.prototype.valid = function(){   
  91. var srcCTLWithJQuery = $("#"+this._parent);   
  92. var tip = $( "#"+srcCTLWithJQuery.attr("id")+"Tip" );   
  93. tip.html( "正在加载..." );   
  94. tip.removeClass();   
  95. tip.addClass( "msgAjaxing" );   
  96. srcCTLWithJQuery.attr( "ajaxvalid" , this );   
  97. $.ajax({   
  98. type: "POST",   
  99. url: this.url+"?t="+Math.random(),   
  100. data: srcCTLWithJQuery.attr("id")+"=" + srcCTLWithJQuery.val(),   
  101. success: function(data){   
  102. var obj = eval('('+ data +')');   
  103. var c = $("#"+obj.ctl);   
  104. var t = c.attr("ajaxvalid");   
  105. if ( null!= t.callback ){   
  106. t.callback( obj , t );   
  107. }else{   
  108. if ( obj.value )   
  109. t.isValid = true;   
  110. else  
  111. t.isValid = false;   
  112. }   
  113. t.updateShow();   
  114. }   
  115. });   
  116. }   
  117. function initValid( srcID , minLen , maxLen , allowEmpty , regexExpression ,tipMsg, errMsg , msgEmpty,onValid ){   
  118. var srcCTLWithJQuery = $("#"+srcID);   
  119. var validator = new Validator( srcID , minLen , maxLen , allowEmpty , regexExpression , tipMsg , errMsg ,msgEmpty,onValid );   
  120. var srcTag = srcCTLWithJQuery.get(0).tagName;   
  121. if ( srcCTLWithJQuery.attr( "validator") == undefined )   
  122. srcCTLWithJQuery.attr( "validator" , new Array() );   
  123. srcCTLWithJQuery.attr( "validator" ).push( validator );   
  124. if ( srcTag == "INPUT" ){//初始INPUT控件   
  125. var type=srcCTLWithJQuery.attr( "type");   
  126. if ( type=="text" || type=="password" ||type=="file" ){   
  127. srcCTLWithJQuery.focus(function(){   
  128. if ( this["validator"]!= undefined && !this["validator"][0].isValid )   
  129. srcCTLWithJQuery.val("");   
  130. var tip = $( "#"+this["id"]+"Tip" );   
  131. tip.html( this["validator"][0].msgOnTip );   
  132. tip.removeClass();   
  133. tip.addClass( "msgOnFocus" );   
  134. });   
  135. srcCTLWithJQuery.blur(function(){   
  136. for ( var i = 0 ; i   
  137.   
  138. this[”validator”][i].valid();   
  139. if ( this[”validator”][i].isAjax==null || this[”validator”][i].isAjax== undefined ){   
  140. this[”validator”][i].updateShow();   
  141. if ( !this[”validator”][i].isValid ){   
  142. break;   
  143. }   
  144. }   
  145. }   
  146. });   
  147. }else if ( type==”checkbox” || type==”radio”){   
  148. $( “input[@name=”+srcCTLWithJQuery.attr(”name”)+”]” ).bind( “click” , function(){   
  149. var val;   
  150. if ( this.validator == undefined ){   
  151. val = $(”input[@name=”+srcCTLWithJQuery.attr(”name”)+”]”).eq(0).attr(”validator”)[0];   
  152. }   
  153. else  
  154. val =this.validator[0];   
  155. val.isValid = true;   
  156. val.updateShow();   
  157. });   
  158. }   
  159. }else if ( srcTag == “SELECT” ){ //初始SELECT控件   
  160. var groupname = srcCTLWithJQuery.attr(”groupname”);   
  161. var validators = $(”select[@groupname=”+groupname+”]” ).eq(0).attr(”validator”);   
  162. $( “select[@groupname=”+groupname+”]” ).bind( “change” , function(){   
  163. for ( var i = 0 ; i if ( validators[i].isAjax==null || validators[i].isAjax== undefined ){   
  164. var isValid=true;   
  165. $(”select[@groupname=”+groupname+”]” ).each( function(){   
  166. if ( this.options.length > 0 ){   
  167. if ( this.value == “” )   
  168. isValid = false;   
  169. else  
  170. isValid = isValid&true;   
  171. }else{   
  172. isValid = isValid&true;   
  173. }   
  174. });   
  175. validators[i].isValid=isValid;   
  176. validators[i].updateShow();   
  177. }   
  178. else{   
  179. validators[i].valid();   
  180. }   
  181. }   
  182. });   
  183. }   
  184. }   
  185. function appendValid( validator ){   
  186. var srcCTLWithJQuery = $(”#”+validator._parent);   
  187. if ( srcCTLWithJQuery.attr( “validator”) == undefined )   
  188. srcCTLWithJQuery.attr( “validator” , new Array() );   
  189. srcCTLWithJQuery.attr( “validator” ).push( validator );   
  190. }   
  191. function PageIsValid(){   
  192. var isValid = true;   
  193. $(”.validElement”).each(function(){   
  194. if ( $( “#”+this[”id”] ).attr( “validator” )!=undefined && $( “#”+this[”id”] ).attr( “validator” )!=null ){   
  195. for( var i = 0 ; i < $( “#”+this[”id”] ).attr( “validator” ).length ; i++ ){   
  196. if ( $( “#”+this[”id”] ).attr( “validator” )[i].isValid==false ){   
  197. isValid = false;   
  198. break;   
  199. }   
  200. }   
  201. }   
  202. });   
  203. return isValid;   
  204. }   
11301 28 标签：JQUERY 表单验证 
访客评论
  • ssss    [2010-3-9]
    ssssssssssssssss
  • 5435345    [2009-7-2]
    5555555
  • dfdfd    [2009-6-11]
    fsdafdsfsdfasdf
  • ____    [2009-6-11]
    jkjk
  • ____    [2009-6-11]
    jkjk
  • ____    [2009-6-11]
    jkjk
  • 路过    [2009-3-13]
    看了你做的这个验证的代码，朋友可不可以发一份给我，学习一下！　lgdwell@163.com
  • shiny    [2009-2-6]
    话说，其实有时候不需要获取焦点后的提示
  • fdsfds    [2008-1-5]
    fdfdsfsdfds
  • John Liu    [2007-12-25]
    老大,你什么时候能上线啊.有几个疑问想问你.
    1是如何在验证出错的时候改变前边的图标.
    2是如果在表单得到焦点和失去焦点的时候还要进行其他操作的话应该如何做呢?
    我qq是123555328.
FIRST123LAST
发表评论
  • 你的姓名：
  • 你的网站：
  •   EMAIL：   
  • 评论内容：
  • 私人