jQuery プラグインの使い方を簡単に学ぶ jquery.validate.js フォーム検証プラグイン_jquery

JavaScript を使用する最も一般的な機会はフォーム検証であり、優れた JavaScript ライブラリである jQuery は、優れたフォーム検証プラグイン ----Validation も提供します。 Validation は最も古い jQuery プラグインの 1 つであり、世界中のさまざまなプロジェクトによって検証され、多くの Web 開発者によって賞賛されています。標準的な検証メソッド ライブラリとして、Validation には次の特徴があります:

• 1. 組み込みの検証ルール: 必須、番号、電子メール、URL、クレジット カード番号など 19 種類の組み込みの検証ルールがあります
• 2. カスタマイズされた検証ルール: 検証ルールは簡単にカスタマイズできます
• 3. シンプルで強力な検証情報プロンプト: 検証情報プロンプトがデフォルトで提供され、デフォルトのプロンプト情報をカスタマイズする機能を提供します
• 4. リアルタイム検証: フォームの送信時だけでなく、keyup イベントやブラー イベントを通じて検証がトリガーされる場合もあります

使用法:
1. jQuery ライブラリと Validation プラグインを導入します

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> 
<script src="scripts/jquery.validate.js" type="text/javascript"></script> 

2. どのフォームを検証する必要があるかを決定します

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  $("#commentForm").validate(); 
}); 
//]]> 
</script> 

3. さまざまなフィールドの検証ルールをエンコードし、フィールドの対応する属性を設定します

class="required"  必须填写 
class="required email"    必须填写且内容符合Email格式验证 
class="url"       符合URL格式验证 
minlength="2"   最小长度为2 

検証可能なルールは 19 種類あります:
必須: 必須フィールド
remote: "このフィールドを修正してください"、
メール： url: URL 検証
date: 日付の確認 dateISO: 日付 (ISO) 検証
日付DE:
番号: 番号認証
番号DE:
数字：
クレジットカード:
クレジットカード番号の確認
equalTo: 「同じ値をもう一度入力してください」の検証
accept: 有効なサフィックス名による文字列検証
maxlength/minlength: 最大/最小長の検証
rangelength: 文字列長範囲の検証
範囲： 最大/最小: 別の検証方法 (管理を容易にするために、すべての検証関連情報をクラス属性に書き込みます)
1) 新しい jQuery プラグインを導入します
---jquery.metadata.js (固定形式の解析をサポートする jQuery プラグイン)

コードをコピー コードは次のとおりです:

fd802b18c3e171368ba8299fe519b1ca2cacc6d41bbb37262a98f745aa00fbf0 2) という検証方法を変更します。

3) すべての検証ルールをクラス属性 に書き込みます。

<script type="text/javascript"> 
////<![CDATA[ 
$(document).ready(function(){ 
  //将$("#commentForm").validate(); 改成 
  $("#commentForm").validate({meta: "validate"}); 
}); 
//]]> 
</script> 

name 属性を使用してフィールドと検証ルールを関連付けることもできます (検証動作は HTML 構造から完全に分離されています)

class="{validate:{required: true, minlength: 2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" 
class="{validate:{required: true, email: true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}"    

国際化

Validation プラグインの検証情報のデフォルト言語は英語です。これを中国語に変更する場合は、Validation によって提供される中国語の検証情報をインポートするだけです。インポート コードは次のとおりです。

$("#commentForm").validate({ 
  rules: { 
   username: { 
     required: true, 
     minlength: 2 
   }, 
   email: { 
     required: true, 
     email: true 
   }, 
   url:"url", 
   comment: "required" 
  }, 
  messages: { 
   username: { 
     required: '请输入姓名', 
     minlength: '请至少输入两个字符' 
   }, 
   email: { 
     required: '请输入电子邮件', 
     email: '请检查电子邮件的格式' 
   }, 
   url: '请检查网址的格式', 
   comment: '请输入您的评论' 
  } 
}); 

コードをコピー コードは次のとおりです:

1df9aa1e3b266c6ad7b8be90ac725d2f2cacc6d41bbb37262a98f745aa00fbf0

認証情報をカスタマイズして美化する

カスタム検証ルール

上記はフォーム検証プラグイン jquery.validate.js の詳細な紹介です。皆さんの学習に役立つことを願っています。

errorElement: "em",        //可以用其他标签，记住把样式也对应修改 
success: function(label) {  //label指向上面那个错误提示信息标签em 
   label.text("")            //清空错误提示消息 
       .addClass("success");  //加上自定义的success类 
   } 
在CSS中添加样式与之关联 
em.error { 
   background:url("images/unchecked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
} 
em.success { 
   background:url("images/checked.gif") no-repeat 0px 0px; 
   padding-left: 16px; 
}