ホームページ > バックエンド開発 > PHPチュートリアル > jquery validataフォーム検証デモ

jquery validataフォーム検証デモ

WBOY
リリース: 2016-07-25 08:48:25
オリジナル
1183 人が閲覧しました
  1. jQuery Validation Framework
  2. 6. 組み込み Validation メソッドのリスト (組み込み Validation メソッドのリスト)
  3. [1] required( ) Return: Boolean
  4. 説明: フォーム要素の入力を必須にする (選択)。
  5. フォーム要素が空 (テキスト入力) であるか、選択されていない (ラジオ/チェックボックス) か、空の値が選択されている (選択) 場合。
  6. テキスト入力、選択、チェックボックス、ラジオ ボタンに作用します。
  7. select が空のオプション を提供する場合、ユーザーは空ではないオプション値を選択する必要があります。 。
  8. Js code
  9. $("#myform").validate({
  10. rules: {
  11. Fruit: "required"
  12. }
  13. });
  14. [2] required( dependency-expression) Return: ブール値
  15. パラメータ dependency-式のタイプ: String フォーム コンテキスト内の式 (String) フォーム要素に入力する必要があるかどうかは、1 つ以上の要素を返す式によって異なります。
  16. 説明: パラメーターの戻り値に応じて、フォーム要素を入力 (選択) する必要があります。
  17. #foo:checked、#foo:filled、#foo:visible などの選択フィルターは式で頻繁に使用されます。
  18. Js コード
  19. $("#myform").validate({
  20. ルール: {
  21. 詳細: {
  22. 必須: "#other:checked"
  23. }
  24. }, debug:true
  25. }); other").click(function() {
  26. $("#details").valid();
  27. });
  28. [3] required( dependency-callback ) 戻り値: ブール値
  29. パラメータ dependency-callback 型: コールバックreturn 関数は、検証される form 要素を唯一のパラメータとして受け取ります。コールバック関数が true を返す場合、form 要素は必須です。
  30. 説明: パラメーターの戻り値に応じて、フォーム要素を入力 (選択) する必要があります。
  31. #foo:checked、#foo:filled、#foo:visible などの選択フィルターは式で頻繁に使用されます。
  32. Jsコード
  33. $("#myform").validate({
  34. rules: {
  35. age: {
  36. required: true,
  37. min: 3
  38. },
  39. parent: {
  40. required: function(element) {
  41. return $("#年齢").val() }
  42. }
  43. }
  44. });
  45. $("#parent").valid ();
  46. });
  47. [4]remote( options ) 戻り値: ブール型
  48. パラメーター オプション 型: 文字列、サーバー側リソースを要求するためのオプション URL (文字列)。または $.ajax() メソッドのオプション。
  49. 説明: サーバー側のリソース検証をリクエストします。
  50. サーバー側リソースは $.ajax (XMLHttpRequest) を通じてキーと値のペアを取得し、応答が true を返した場合、フォームは検証に合格します。
  51. Jsコード
  52. $("#myform").validate({
  53. ルール: {
  54. メール: {
  55. 必須: true,
  56. メール: true,
  57. リモート: "check-email.php"
  58. }
  59. }
  60. } );
  61. [5] minlength( length ) 戻り値: ブール型
  62. パラメーター length 型: 整数 必要な最小文字数。
  63. 説明: フォーム要素が指定された最小文字数を満たしていることを確認してください。
  64. テキスト入力に入力された文字数が少なすぎます。選択されているチェックボックスが不十分であり、選択ボックスで選択されているオプションが不十分です。これら 3 つのケースでは、メソッドは false を返します。
  65. Js コード
  66. $("#myform").validate({
  67. ルール: {
  68. フィールド: {
  69. 必須: true,
  70. minlength: 3
  71. }
  72. }
  73. });
  74. [6] maxlength( length );戻り値: ブール型
  75. パラメータの長さ 型: 整数 入力できる最大文字数。
  76. 説明: フォーム要素のテキストが指定された最大文字数を超えていないことを確認してください。
  77. テキスト入力ボックスに入力する文字数が多すぎる、チェックボックスを選択しすぎる、または選択ボックスでオプションを選択しすぎます。これら 3 つのケースでは、メソッドは false を返します。
  78. Js コード
  79. $("#myform").validate({
  80. ルール: {
  81. フィールド: {
  82. 必須: true、
  83. maxlength: 4
  84. }
  85. }
  86. });戻り値: ブール型
  87. パラメータ範囲 型: Array 入力できる文字の範囲。
  88. 説明: フォーム要素のテキスト文字数が指定された範囲内であることを確認します。
  89. テキスト入力ボックスに入力された文字数が指定範囲外、選択されているチェックボックスが指定範囲外、セレクトボックスで選択されているオプションが指定範囲外です。これら 3 つのケースでは、メソッドは false を返します。
  90. Js コード
  91. $("#myform").validate({
  92. ルール: {
  93. フィールド: {
  94. 必須: true,
  95. rangelength: [2, 6]
  96. }
  97. }
  98. }); min( value ) 戻り値: Boolean
  99. パラメーター値の型: Integer 入力する必要がある最小の整数。
  100. 説明: フォーム要素の値が指定された最小整数以上であることを確認します。
  101. このメソッドはテキスト入力ボックス(テキスト入力)でのみ有効です。
  102. Jsコード
  103. $("#myform").validate({
  104. ルール: {
  105. フィールド: {
  106. 必須: true,
  107. min: 13
  108. }
  109. }
  110. });戻り値: ブール値
  111. パラメータ値のタイプ: 整数 指定された最大の整数。
  112. 説明: フォーム要素の値が指定された最大整数以下であることを確認します。
  113. このメソッドはテキスト入力ボックス(テキスト入力)でのみ有効です。
  114. Js コード
  115. $("#myform").validate({
  116. ルール: {
  117. フィールド: {
  118. 必須: true、
  119. 最大: 23
  120. }
  121. }
  122. });戻り値: ブール型
  123. パラメータ範囲のタイプ: Array 指定された整数の範囲。
  124. 説明: form 要素の値が指定された範囲内にあることを確認します。
  125. このメソッドはテキスト入力ボックス(テキスト入力)でのみ有効です。
  126. Js コード
  127. $("#myform").validate({
  128. ルール: {
  129. フィールド: {
  130. 必須: true、
  131. 範囲: [13, 23]
  132. }
  133. }
  134. }); email( ) 戻り値: Boolean
  135. 説明: form 要素の値が有効な電子メール アドレスであることを確認してください。
  136. 値が有効な電子メール アドレスの場合は true を返します。このメソッドは、テキスト入力ボックス (テキスト入力) でのみ有効です。
  137. Jsコード
  138. $("#myform").validate({
  139. ルール: {
  140. フィールド: {
  141. 必須: true,
  142. メール: true
  143. }
  144. }
  145. });
  146. [12] url( ) return :ブール型
  147. 説明: form 要素の値が有効な URL アドレス (http://www.mydomain.com) であることを確認してください。
  148. 値が有効な URL アドレスの場合は true を返します。このメソッドは、テキスト入力ボックス (テキスト入力) でのみ有効です。
  149. Jsコード
  150. $("#myform").validate({
  151. ルール: {
  152. フィールド: {
  153. 必須: true,
  154. URL: true
  155. }
  156. }
  157. }); ( ) dateDE( ) 戻り値: ブール値
  158. 説明: 有効な日付を確認するために使用されます。これら 3 つの関数で検証される日付形式は、それぞれ (mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、および (mm.dd.yyyy) です。
  159. Js コード
  160. $("#myform").validate({
  161. ルール: {
  162. フィールド: {
  163. 必須: true,
  164. 日付: true
  165. /*dateISO: true
  166. dateDE: true*/
  167. }
  168. }
  169. });
  170. [14]number( )numberDE() 戻り値: ブール値
  171. 説明: 小数を検証するために使用されます。 number() の小数点はドット ( . )、numberDE() の小数点はカンマ ( , ) です。
  172. Js コード
  173. $("#myform").validate({
  174. ルール: {
  175. フィールド: {
  176. 必須: true,
  177. 番号: true
  178. //numberDE: true
  179. }
  180. }
  181. }); 15] 数字() 戻り値: ブール型
  182. 説明: テキスト ボックスの値が数値であることを確認します。
  183. Js コード
  184. $("#myform").validate({
  185. ルール: {
  186. フィールド: {
  187. 必須: true、
  188. 数字: true
  189. }
  190. }
  191. });
  192. [16] 桁 () return :Boolean
  193. 説明: テキスト ボックスの値が数値であることを確認します。
  194. Jsコード
  195. $("#myform").validate({
  196. ルール: {
  197. フィールド: {
  198. 必須: true、
  199. 数字: true
  200. }
  201. }
  202. }); ] ) 戻り値: ブール値
  203. パラメーター拡張子 (オプション) タイプ: 文字列 「|」または「,」で区切られた、許可されるファイル接尾辞名。デフォルトは「png|jpe?g|gif」です
  204. 説明: form 要素が指定されたファイル拡張子を持つファイルを受信することを確認します。パラメーターを指定しない場合は、画像 (png、jpeg、gif) のみが許可されます。
  205. Js コード
  206. $("#myform").validate({
  207. ルール: {
  208. フィールド: {
  209. 必須: true、
  210. accept: "xls|csv"
  211. }
  212. }
  213. }); equalTo( other ) 戻り値: Boolean
  214. パラメータ other 型: セレクター 現在の値と比較される別のフォーム要素。
  215. 説明: 2 つのフォーム要素の値が一貫していることを確認します。
  216. Jsコード
  217. $("#myform").validate({
  218. ルール: {
  219. パスワード: "必須",
  220. password_again: {
  221. equalTo: "#password"
  222. }
  223. }
  224. });コード
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート