当前位置：Gxlcms > PHP教程 > jqueryvalidata表单验证DEMO

jqueryvalidata表单验证DEMO

时间：2021-07-01 10:21:17 帮助过：27人阅读

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！