jquery-validation-1.9.0

6269 ワード

jQuery検証プラグイン:
シンプルで効率的なクライアント検証フレームワークで、パーソナライズされた効果を実現するために多くの属性を提供します.できるだけ少ないエラーメッセージを表示して、画面がユーザーに友好的な効果をもたらすようにユーザーに提示します.
Email、Urlなど、多くの一般的な検証方法を内蔵し、インタフェースも提供しています.
独自の検証メソッドを実装したり、サーバ側メソッドを呼び出して検証したりすることができます.
国際化をサポートし、36言語のエラーメッセージをサポートし、デフォルトでは英語版のエラーメッセージを使用します.
form提出時
デフォルトのフォーカスは、最初の検証が通過しないコントロールに設定されています(逆にすることもできます).2つのコントロールの検証が通じず、前のフォーカスが後のコントロールにコミットされると、自動的に後のコントロールにフォーカスが設定され、ユーザーが変更しやすいようになります.
値が変更されると自動的に検証され、複数のエラーが同時に表示されます.コミットされると、デフォルトではすべての検証に通じないコントロールがマークされます.また、修正されると、修正された値が検証に合格すると、エラーマークは自動的に消えます.
怠惰検証:Formが最初にコミットされる前にtabキーを使用してコントロールを切り替えると、検証操作はトリガーされません.
ただし、値を変更すると、検証メソッドが自動的に呼び出されて検証されます.検証に合格すると、対応するエラーメッセージが自動的に消えます.
$.validator.addMethod(name,method,[message])が実現可能
条件検証の効果、すなわち、条件に基づいて動的に検証ルールを追加、削除する使用例を以下に示す.
プラグインで重要な2つの概念:
method:検証方法、真の検証ロジックを実現
rule:検証ルール、コントロールに関連付けられた検証メソッド名、コントロールが行う検証操作を示す
デフォルトの使用
class=「required email」でコントロールに対応する検証ルールを設定

//              ,           ,             ,     name  !!!   jquery   ?
$("#myform").validate({
  rules: {
    txtUrl: {url: true},
    txtEmail: {email : true},
    // no quoting necessary
    name: "required",
    // quoting necessary!            ,             
    "user[email]": "email",
    // dots need quoting, too!
    "user.address.street": "required"
  }
});

デフォルトの組み込み方法:

required( )	Returns: Boolean
Makes the element always required.
required( dependency-expression )	Returns: Boolean
Makes the element required, depending on the result of the given expression.
required( dependency-callback )	Returns: Boolean
Makes the element required, depending on the result of the given callback.
remote( options )	Returns: Boolean
Requests a resource to check the element for validity.
minlength( length )	Returns: Boolean
Makes the element require a given minimum length.
maxlength( length )	Returns: Boolean
Makes the element require a given maxmimum length.
rangelength( range )	Returns: Boolean
Makes the element require a given value range.
min( value )	Returns: Boolean
Makes the element require a given minimum.
max( value )	Returns: Boolean
Makes the element require a given maximum.
range( range )	Returns: Boolean
Makes the element require a given value range.
email( )	Returns: Boolean
Makes the element require a valid email
url( )	Returns: Boolean
Makes the element require a valid url
date( )	Returns: Boolean
Makes the element require a date.
dateISO( )	Returns: Boolean
Makes the element require a ISO date.
number( )	Returns: Boolean
Makes the element require a decimal number.
digits( )	Returns: Boolean
Makes the element require digits only.
creditcard( )	Returns: Boolean
Makes the element require a creditcard number.
accept( extension )	Returns: Boolean
Makes the element require a certain file extension.
equalTo( other )	Returns: Boolean
Requires the element to be the same as another one

                additional-methods.js    

グループ化検証、複数のコントロールを一緒に検証(検証メソッド、プロンプトメッセージに対応):
Plugins/Validation/multiplefields
再構築検証(複数のコントロールは同じ検証ルールとプロンプトメッセージを使用します):

// alias required to cRequired with new message
$.validator.addMethod("cRequired", $.validator.methods.required,
  "Customer name required");
// alias minlength, too
$.validator.addMethod("cMinlength", $.validator.methods.minlength, 
  // leverage parameter replacement for minlength, {0} gets replaced with 2
  $.format("Customer name must have at least {0} characters"));
// combine them both, including the parameter for minlength
$.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });

//         ,    class:customer
<input name="customer1" class="customer" />
<input name="customer2" class="customer" />
<input name="customer3" class="customer" />

エラーメッセージの優先順位:A custom message(passed by plugin options)、the element's title、the default message.
プラグインデバッグ:debugオプションの値をtrueに設定すると、検証が通過するかどうかにかかわらず、formのコミットが阻止され、windowに役立つ情報が出力されます.コンソール(firebugまたはfirebug liteで見ることができます)
複数のformが画面にある場合、プラグインはデフォルトで毎回1つのformのみを検証し、$を通過することができる.validator.setDefaults({...}) を使用して、複数のformを一度に検証できるようにデフォルトの動作を変更します.
Ajax検証:

$("#myform").validate({
  rules: {
    username: {
      required: true,
      minLength: 2,
      remote: "users.php"
    }
  },
  messages: {
    username: {
      required: "Enter your username",
      minLength: "At least 2 characters are necessary",
      remote: String.format("The name {0} is already in use")
    }
  }
});

デフォルトのヒントを変更するには、次の手順に従います.

$.extend($.validator.messages, {
  required: "Eingabe nötig",
  email: "Bitte eine gültige E-Mail-Adresse eingeben",
  ...
});

プロトコル:MIT/GPL
公式サイト:
jQuery plugin: Validation
参照ドキュメント:
Plugins/Validation
デモデモデモ:
jQuery Validation Plugin Demo
FAQ:
Plugins/Validation/Reference