jQuery 検証フォーム validation_jquery の詳細-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jQuery 検証フォーム validation_jquery の詳細

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

jqueryvalidateフォームの検証

この記事の例では、jQuery Validate フォーム検証を紹介します。主に jquery.metadata.js を使用して、クラス属性に直接検証ルールを記述し、具体的な内容を共有します。は以下の通りです

1. 別のプラグイン jquery.metadata.js を追加し、コントロールに検証ルールを記述します。
2. 検証のトリガー方法を書き直す必要があります。

$("#commentForm").validate({meta: "validate"});

3. 詳細なコードは次のとおりです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

デフォルトの検証ルール:

(1)required:true 必須フィールド
(2)remote:"check.php" ajax メソッドを使用して check.php を呼び出し、入力値を確認します
(3)email:true 正しい形式で電子メールを入力する必要があります
(4)url:true URL は正しい形式で入力する必要があります
(5)date:true 日付を正しい形式で入力する必要があります。日付検証 ie6 ではエラーが発生します。注意して使用してください。
(6)dateISO:true 日付 (ISO) を正しい形式で入力する必要があります。例: 2009-06-23、1998/01/22 形式のみが検証され、形式は検証されません。有効性
(7)number:true 有効な数値 (負の数、10 進数) を入力する必要があります
(8) 桁: true 整数を入力する必要があります
(9)クレジットカード: 正規のクレジットカード番号を入力する必要があります
(10)equalTo:"#field" 入力値は #field
(11) 受け入れる: 正当なサフィックスを含む文字列を入力します (ファイルのサフィックスに影響を受けません)
(12)maxlength:5 最大長 5 の文字列を入力します (漢字は 1 文字と数えます)
(13)minlength:10 最小長 10 の文字列を入力します (漢字は 1 文字としてカウントされます)
(14)rangelength:[5,10] 入力長は 5 ～ 10 の文字列である必要があります") (漢字は 1 文字としてカウントされます)
(15)range:[5,10] 入力値は 5 ～ 10 である必要があります
(16)max:5入力値は 5 を超えることはできません。
デフォルトのプロンプト:

4. レンダリングは次のとおりです:

messages: {
  required: "This field is required.",
  remote: "Please fix this field.",
  email: "Please enter a valid email address.",
  url: "Please enter a valid URL.",
  date: "Please enter a valid date.",
  dateISO: "Please enter a valid date (ISO).",
  dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
  number: "Please enter a valid number.",
  numberDE: "Bitte geben Sie eine Nummer ein.",
  digits: "Please enter only digits",
  creditcard: "Please enter a valid credit card number.",
  equalTo: "Please enter the same value again.",
  accept: "Please enter a value with a valid extension.",
  maxlength: $.validator.format("Please enter no more than {0} characters."),
  minlength: $.validator.format("Please enter at least {0} characters."),
  rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
  range: $.validator.format("Please enter a value between {0} and {1}."),
  max: $.validator.format("Please enter a value less than or equal to {0}."),
  min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

5. 注: class="{}" を使用するには、パッケージ jquery.metadata.js を導入する必要があります。

次のメソッドを使用してプロンプトの内容を変更できます:

equalTo キーワードを使用する場合は、次の内容を引用符で囲む必要があります。コードは次のとおりです。

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

6. エラーメッセージプロンプトをクラス属性で直接定義します。

class="{required:true,minlength:5,equalTo:'#password'}"

7. 効果は次のとおりです。

上記がこの記事の全内容です。最近、jQuery Validate フォーム検証に関する記事がたくさん更新されていますので、合わせて学習していただければ幸いです。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。

axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。

jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。

jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。

jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。

jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。