Heim > Backend-Entwicklung > PHP-Tutorial > jquery validata 表单验证DEMO

jquery validata 表单验证DEMO

WBOY
Freigeben: 2016-07-25 08:48:25
Original
1174 Leute haben es durchsucht
  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. });
复制代码


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage