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

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

WBOY

リリース： 2016-05-16 15:28:35

オリジナル

1103 人が閲覧しました

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 プラグイン)

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

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: '请输入您的评论' 
  } 
});

ログイン後にコピー

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

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

カスタム検証ルール

上記はフォーム検証プラグイン 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; 
}

ログイン後にコピー