首頁 >後端開發 >php教程 >jquery validata 表單驗證DEMO

jquery validata 表單驗證DEMO

WBOY
WBOY原創
2016-07-25 08:48:251186瀏覽
複製程式碼
  1. jQuery驗證框架
  2. 六、框架內建的驗證方法( List of built-in Validation methods )
  3. [1] required( ) required( ) required( ) required( ) required( ) required( ) 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. required: true,
  60. email: true,
  61. remote: "check-email.php"
  62. }
  63. }
  64. });
  65. [5] minlength( length ) 傳回:Boolean
  66. 參數length 類型:Integer 至少需要多少個字元數。
  67. 說明:確保表單元素滿足給定的最小字元數。
  68. 在文字方塊(text input)中輸入的字元太少、沒有選取足夠的複選框(checkbox)、一個選擇框(select)中沒有選取足夠的選項。這以上三種情況中該方法傳回false。
  69. Js程式碼
  70. $("#myform").validate({
  71. rules: {
  72. field: {
  73. required: true,
  74. minlength: 3
  75. }
  76. }
  77. });
  78. [6] maxlength( length ) 傳回:Boolean
  79. 參數length 類型:Integer 允許輸入的最大字元數。
  80. 說明:確保表單元素的文字不超過給定的最大字元數。
  81. 在文字方塊(text input)中輸入的字元太多、選擇太多的複選框(checkbox)、一個選擇框(select)中沒有選取太多的選項。這以上三種情況中該方法傳回false。
  82. Js代碼
  83. $("#myform").validate({
  84. rules: {
  85. field: {
  86. required: true,
  87. maxlength: 4
  88. }
  89. }
  90. });
  91. [7] rangelength( range ) 傳回:Boolean
  92. 參數range 類型:Array 允許輸入的字元數範圍。 說明:確保表單元素的文字字元數在給定的範圍當中。 在文字方塊(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. required: true,
  199. digits: true
  200. }
  201. }
  202. });
  203. [16] digits() 傳回:Boolean
  204. 說明:確保文字方塊中的值為數字。
  205. Js程式碼
  206. $("#myform").validate({
  207. rules: {
  208. field: {
  209. required: true,
  210. digits: true
  211. required: true,
  212. digits: true
  213. }
  214. }
  215. });
  216. [17] accept( [extension] ) 傳回:Boolean
  217. 參數extension(Optional) 類型:String 允許的檔案後綴名,用"|"或","分割。預設為"png|jpe?g|gif"
  218. 說明:確保表單元素接收給定的檔案後綴名的檔案。如果沒有指定參數,則只有圖片是允許的(png,jpeg,gif)。
  219. Js程式碼
  220. $("#myform").validate({
  221. rules: {
  222. field: {
  223. required: true,
  224. accept: "xls|csv "
  225. }
  226. }
  227. });
  228. [18] equalTo( other ) 傳回:Boolean
  229. 參數other 類型:Selector 要與目前值比較的另一個表單元素。
  230. 說明:確保兩個表單元素的值是一致的。
  231. Js程式碼
  232. $("#myform").validate({
  233. rules: {
  234. password: "required",
  235. password_again: {
equalTo: "# password"
} } });


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn