validationEngine中文版使用教程 (2).doc

validationEngine中文版 jquery强大的表单验证插件 中文汉化版，官方只有英文的。同时根据中国国情修改了部分验证规则。 这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。官方下载地址：/articles/jquery-form-validator-because-form-validation-is-a-mess/ 普通验证的例子：/creation/formValidator/ajax验证的例子：/creation/formValidator/demoSubmit.html一：简单说明下使用教程：引入jquery和插件js、css1. 2. 3. 4. jquery.validationEngine-en.js是语言文件，所有的提示都在这个文件找的到，可以很方便的转成其他语言，同时你也可以在这个文件内定制属于自己的验证规则。初始化插件1. $(document).ready(function() 2. $(#formID).validationEngine()3. )验证规则是写在表单元素的class属性内。比如下面：1. 验证规则非常多样，基本上包含了所有的数据类型的验证。所有的验证规则写在validate内，有多种验证，用逗号隔开，这里简要说明下常用的验证规则。1. required：值不可以为空2. length0,100 ：文字允许长度3. confirmfieldID ：匹配其他的表单元素的值，fieldID就是其他表单元素的id，这个主要用于再次确认密码4. telephone ：数据格式要求符合电话格式5. email ： 数据格式要求符合email 格式6. onlyNumber ：只允许输入数字7. noSpecialCaracters ：不允许出现特殊字符8. onlyLetter ： 只能是字母9. date ：必须符合日期格式YYYY-MM-DD 你还可以在点击提交按钮后才触发验证。1. $(#formID).validationEngine(2. inlineValidation: false, 3. success : false, 4. failure : function() callFailFunction() 5. )默认的是在鼠标失去焦点后才开始验证，也就是绑定的是blur事件，那如何改变呢？看下面的配置。1. $(#formID).validationEngine(2. validationEventTriggers:keyup blur, /will validate on keyup and blur 3. success : false, 4. failure : function() callFailFunction() 5. )validationEventTriggers属性就是修改绑定事件，上面是增加了个keyup，也就是键盘按键起来就触发验证。修改提示层的位置1. $(#formID).validationEngine(2. promptPosition: topRight, / OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight 3. success : false, 4. failure : function()5. )promptPosition就是控制位置，有5种模式：topLeft, topRight, bottomLeft, centerRight, bottomRight ajax验证模式1. $(#formID).validationEngine(2. ajaxSubmit: true, 3. ajaxSubmitFile: ajaxSubmit.php, 4. ajaxSubmitMessage: Thank you, we received your inscription!, 5. ajaxSubmitExtraData: securityCode=38709238423&name=john, 6. success : false, 7. failure : function() 8. )这几个参数很好理解。1. ajaxSubmit: true, 提交表单使用ajax提交2. ajaxSubmitFile: “ajaxSubmit.php”, 后台脚本3. ajaxSubmitMessage 成功后显示的信息4. ajaxSubmitExtraData 参数这里需要对后台脚本返回的数据进行下说明：返回的数据格式是json。出现一个错误，产生一个数组，如下：1. $arrayError00 = #email; / FIELDID 2. $arrayError01 = Your email do not match. whatever it need to match; / TEXT ERROR 3. $arrayError02 = error; / BOX COLOR二：修改过的地方解决ie6下select遮挡div的办法 jquery.validationEngine.js要修改的地方：Xml代码 1. calculatedPosition.callerTopPosition+=px; 2. calculatedPosition.callerleftPosition+=px; 3. calculatedPosition.marginTopSize+=px; 4. /addmatychen 5. if($.browser.msie&/6.0/.test(navigator.userAgent) 6. $(divFormError).append(); 7. 8. /addmatychen 9. $(divFormError).css( 10. top:calculatedPosition.callerTopPosition, 11. left:calculatedPosition.callerleftPosition, 12. marginTop:calculatedPosition.marginTopSize, 13. opacity:0 14. );validationEngine.jquery.css里面加入以下代码： Java代码 1. .iframe 2. position:absolute; 3. width:expression(this.parentNode.offsetWidth+px); 4. height:expression(this.parentNode.offsetHeight-32+px); 5. z-index:-1; 6. top:expression(parseInt(this.parentNode.currentStyle.borderTopWidth)|0)*-1)+px); 7. left:expression(parseInt(this.parentNode.currentStyle.borderLeftWidth)|0)*-1)+px); 8. formvalidator.html如下： Java代码 1. 2. 3. 4. formvalidator.html 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. $(document).ready(function() 18. $(#formID).validationEngine( 19. validationEventTriggers:blur,/触发的事件validationEventTriggers:keyupblur, 20. inlineValidation:true,/是否即时验证，false为提交表单时验证,默认true 21. success:false,/为true时即使有不符合的也提交表单,false表示只有全部通过验证了才能提交表单,默认false 22. promptPosition:topRight,/提示所在的位置，topLeft,topRight,bottomLeft,centerRight,bottomRight 23. /failure:function()alert(验证失败，请检查。);/验证失败时调用的函数 24. /success:function()callSuccessFunction(),/验证通过时调用的函数 25. ); 26. ); 27. 28. 29. 30. 31. 32. 33. Userinformations 34. 35. Desiredusername(ajaxvalidation,onlykarniusisavailable): 36. /ajax验证用户名的地方 37. 38. 39. Firstname(optional) 40. 41. 42. 43. Lastname: 44. 45. 46. 47. RadioGroupe: 48. radio1: 49. 50. radio2: 51. 52. radio3: 53. 54. 55. 56. Minimum2checkbox: 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. Date:(formatYYYY-MM-DD) 67. 68. 69. 70. Favoritesport1: 71. 72. Chooseasport 73. Tennis 74. Football 75. Golf 76. 77. 78. 79. Favoritesport2: 80. 81. Chooseasport 82. Tennis 83. Football 84. Golf 85. 86. 87. 88. Age: 89. 90. 91. 92. 93. Telephone: 94. 95. 96. 97. mobilephone: 98. 99. 100. 101. chinese: 102. 103. 104. 105. url: 106. 107. 108. 109. zipcode: 110. 111. 112. 113. ip: 114. 115. 116. 117. qq: 118. 119. 120. 121. 122. Password 123. 124. Password: 125. 126. 127. 128. Confirmpassword: 129. 130. 131. 132. 133. Email 134. 135. Emailaddress: 136. 137. 138. 139. Confirmemailaddress: 140. 141. 142. 143. 144. Comments 145. 146. Comments: 147. 148. 149. 150. 151. 152. Conditions 153. Checkingthisboxindicatesthatyouaccepttermsofuse.Ifyoudonotaccepttheseterms,donotusethiswebsite: 154. 155. Iaccepttermsofuse: 156. 157. 158. 159. 160. 161. 162. 163. jquery.validationEngine-cn.js如下： Java代码 1. 2. 3. (function($) 4. $.fn.validationEngineLanguage=function(); 5. $.validationEngineLanguage= 6. newLang:function() 7. $.validationEngineLanguage.allRules=required:/Addyourregexruleshere,youcantaketelephoneasanexample 8. regex:none, 9. alertText:*非空选项., 10. alertTextCheckboxMultiple:*请选择一个单选框., 11. alertTextCheckboxe:*请选择一个复选框., 12. length: 13. regex:none, 14. alertText:*长度必须在, 15. alertText2:至, 16. alertText3:之间., 17. maxCheckbox: 18. regex:none, 19. alertText:*最多选择,/官方文档这里有问题 20. alertText2:项., 21. minCheckbox: 22. regex:none, 23. alertText:*至少选择, 24. alertText2:项., 25. confirm: 26. regex:none, 27. alertText:*两次输入不一致,请重新输入., 28. telephone: 29. regex:/(00-92,3-)?(2-90-96,7)+(-0-91,4)?$/, 30. alertText:*请输入有效的电话号码,如, 31. mobilephone: 32. regex:/(0?13580-99$)/, 33. alertText:*请输入有效的手机号码., 34. email: 35. regex:/a-zA-Z0-9_.-+(a-zA-Z0-9-+.)+a-zA-Z0-92,4$/, 36. alertText:*请输入有效的邮件地址., 37. date: 38. regex:/(0-931-9|0-921-90-91|0-911-90-92|1-90-93)-(013578|102)-(01-9|120-9|301)|(0469|11)-(01-9|120-9|30)|(02-(01-9|10-9|20-8)|(0-92)(048|2468048|1357926)|(048|2468048|357926)00)-02-29)$/, 39. alertText:*请输入有效的日期,如:2008-08-08., 40. ip: 41. regex:/(?:(?:250-5|20-40-9|01?0-90-9?).)3(?:250-5|20-40-9|01?0-90-9?)$/, 42. alertText:*请输入有效的IP., 43. chinese: 44. regex:/u4e00-u9fa5+$/, 45. alertText:*请输入中文., 46. url: 47. regex:/a-zA-z:/s$/,/这些验证请自己加强 48. alertText:*请输入有效的网址., 49. zipcode: 50. regex:/1-9d5$/, 51. alertText:*请输入有效的邮政编码., 52. qq: 53. regex:/1-9d4,9$/, 54. alertText:*请输入有效的QQ号码., 55. onlyNumber: 56. regex:/0-9+$/, 57. alertText:*请输入数字., 58. onlyLetter: 59. regex:/a-zA-Z+$/, 60. alertText:*请输入英文字母., 61. noSpecialCaracters: 62. regex:/0-9a-zA-Z+$/, 63. alertText:*请输入英文字母和数字., 64. ajaxUser: 65. file:valida