jquery validata 表单验证DEMO

WBOY
Libérer: 2016-07-25 08:48:25
original
1151 Les gens l'ont consulté
  1. jQuery验证框架
  2. 六、框架内建的验证方法( List of built-in Validation methods )
  3. [1] required( ) 返回:Boolean
  4. 说明:让表单元素必须填写(选择)。
  5. 如果表单元素为空(text input)或未选择(radio/checkbox)或选择了一个空值(select)。
  6. 作用于text inputs, selects, checkboxes and radio buttons.
  7. 当select提供了一个空值选项则强迫用户去选择一个不为空的值。
  8. Js代码
  9. $("#myform").validate({
  10. rules: {
  11. fruit: "required"
  12. }
  13. });
  14. [2] required( dependency-expression ) 返回:Boolean
  15. 参数 dependency-expression 类型:String 在form上下文中的一个表达式( String ),表单元素是否需要填写依赖于该表达式返回一个或多个元素。
  16. 说明:让表单元素必须填写(选择),依赖于参数的返回值。
  17. 表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。
  18. Js代码
  19. $("#myform").validate({
  20. rules: {
  21. details: {
  22. required: "#other:checked"
  23. }
  24. }, debug:true
  25. });
  26. $("#other").click(function() {
  27. $("#details").valid();
  28. });
  29. [3] required( dependency-callback ) 返回:Boolean
  30. 参数 dependency-callback 类型:Callback 该回函数以待验证表单元素作为其唯一的参数。当该回调函数返回true,则该表单元素是必须的。
  31. 说明:让表单元素必须填写(选择),依赖于参数的返回值。
  32. 表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。
  33. Js代码
  34. $("#myform").validate({
  35. rules: {
  36. age: {
  37. required: true,
  38. min: 3
  39. },
  40. parent: {
  41. required: function(element) {
  42. return $("#age").val() }
  43. }
  44. }
  45. });
  46. $("#age").blur(function() {
  47. $("#parent").valid();
  48. });
  49. [4] remote( options ) 返回:Boolean
  50. 参数 options 类型:String, Options 请求服务器端资源的url(String)。或$.ajax()方法中的选项(Options)。
  51. 说明:请求服务器端资源验证。
  52. 服务器端的资源通过$.ajax (XMLHttpRequest)获取key/value对,响应返回true则表单通过验证。
  53. Js代码
  54. $("#myform").validate({
  55. rules: {
  56. email: {
  57. required: true,
  58. email: true,
  59. remote: "check-email.php"
  60. }
  61. }
  62. });
  63. [5] minlength( length ) 返回:Boolean
  64. 参数 length 类型:Integer 至少需要多少个字符数。
  65. 说明:确保表单元素满足给定的最小字符数。
  66. 在文本框(text input)中输入的字符太少、没有选中足够的复选框(checkbox)、一个选择框(select)中没有选中足够的选项。这以上三种情况中该方法返回false。
  67. Js代码
  68. $("#myform").validate({
  69. rules: {
  70. field: {
  71. required: true,
  72. minlength: 3
  73. }
  74. }
  75. });
  76. [6] maxlength( length ) 返回:Boolean
  77. 参数 length 类型:Integer 允许输入的最大字符数。
  78. 说明:确保表单元素的文本不超过给定的最大字符数。
  79. 在文本框(text input)中输入的字符太多、选择太多的复选框(checkbox)、一个选择框(select)中没有选中太多的选项。这以上三种情况中该方法返回false。
  80. Js代码
  81. $("#myform").validate({
  82. rules: {
  83. field: {
  84. required: true,
  85. maxlength: 4
  86. }
  87. }
  88. });
  89. [7] rangelength( range ) 返回:Boolean
  90. 参数 range 类型:Array 允许输入的字符数范围。
  91. 说明:确保表单元素的文本字符数在给定的范围当中。
  92. 在文本框(text input)中输入的字符数不在给定范围内、选择的复选框(checkbox)不在给在的范围内、一个选择框(select)选中的选项不在给定的范围内。这以上三种情况中该方法返回false。
  93. Js代码
  94. $("#myform").validate({
  95. rules: {
  96. field: {
  97. required: true,
  98. rangelength: [2, 6]
  99. }
  100. }
  101. });
  102. [8] min( value ) 返回:Boolean
  103. 参数 value 类型:Integer 需要输入的最小整数。
  104. 说明:确保表单元素的值大于等于给定的最小整数。
  105. 该方法只在文本输入框(text input)下有效。
  106. Js代码
  107. $("#myform").validate({
  108. rules: {
  109. field: {
  110. required: true,
  111. min: 13
  112. }
  113. }
  114. });
  115. [9] max( value ) 返回:Boolean
  116. 参数 value 类型:Integer 给定的最大整数。
  117. 说明:确保表单元素的值小于等于给定的最大整数。
  118. 该方法只在文本输入框(text input)下有效。
  119. Js代码
  120. $("#myform").validate({
  121. rules: {
  122. field: {
  123. required: true,
  124. max: 23
  125. }
  126. }
  127. });
  128. [10] range( range ) 返回:Boolean
  129. 参数 range 类型:Array 给定的整数范围。
  130. 说明:确保表单元素的值在给定的范围当中。
  131. 该方法只在文本输入框(text input)下有效。
  132. Js代码
  133. $("#myform").validate({
  134. rules: {
  135. field: {
  136. required: true,
  137. range: [13, 23]
  138. }
  139. }
  140. });
  141. [11] email( ) 返回:Boolean
  142. 说明:确保表单元素的值为一个有效的email地址。
  143. 如果值为一个有效的email地址,则返回true。该方法只在文本输入框(text input)下有效。
  144. Js代码
  145. $("#myform").validate({
  146. rules: {
  147. field: {
  148. required: true,
  149. email: true
  150. }
  151. }
  152. });
  153. [12] url( ) 返回:Boolean
  154. 说明:确保表单元素的值为一个有效的URL地址(http://www.mydomain.com)。
  155. 如果值为一个有效的url地址,则返回true。该方法只在文本输入框(text input)下有效。
  156. Js代码
  157. $("#myform").validate({
  158. rules: {
  159. field: {
  160. required: true,
  161. url: true
  162. }
  163. }
  164. });
  165. [13] date( ) dateISO( ) dateDE( ) 返回:Boolean
  166. 说明:用来验证有效的日期。这三个函数分别验证的日期格式为(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。
  167. Js代码
  168. $("#myform").validate({
  169. rules: {
  170. field: {
  171. required: true,
  172. date: true
  173. /*dateISO: true
  174. dateDE: true*/
  175. }
  176. }
  177. });
  178. [14] number( ) numberDE() 返回:Boolean
  179. 说明:用来验证小数。number()的小数点为圆点( . ),numberDE()的小数点为英文逗号( , )。
  180. Js代码
  181. $("#myform").validate({
  182. rules: {
  183. field: {
  184. required: true,
  185. number: true
  186. //numberDE: true
  187. }
  188. }
  189. });
  190. [15] digits() 返回:Boolean
  191. 说明:确保文本框中的值为数字。
  192. Js代码
  193. $("#myform").validate({
  194. rules: {
  195. field: {
  196. required: true,
  197. digits: true
  198. }
  199. }
  200. });
  201. [16] digits() 返回:Boolean
  202. 说明:确保文本框中的值为数字。
  203. Js代码
  204. $("#myform").validate({
  205. rules: {
  206. field: {
  207. required: true,
  208. digits: true
  209. }
  210. }
  211. });
  212. [17] accept( [extension] ) 返回:Boolean
  213. 参数 extension(Optional) 类型:String 允许的文件后缀名,用"|"或","分割。默认为"png|jpe?g|gif"
  214. 说明:确保表单元素接收给定的文件后缀名的文件。如果没有指定参数,则只有图片是允许的(png,jpeg,gif)。
  215. Js代码
  216. $("#myform").validate({
  217. rules: {
  218. field: {
  219. required: true,
  220. accept: "xls|csv"
  221. }
  222. }
  223. });
  224. [18] equalTo( other ) 返回:Boolean
  225. 参数 other 类型:Selector 要与当前值比较的另一个表单元素。
  226. 说明:确保两个表单元素的值是一致的。
  227. Js代码
  228. $("#myform").validate({
  229. rules: {
  230. password: "required",
  231. password_again: {
  232. equalTo: "#password"
  233. }
  234. }
  235. });
复制代码


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal