jQuery の使用の概要.Validate 検証 library_jquery-jsチュートリアル-php.cn

jQuery の使用の概要.Validate 検証 library_jquery

WBOY

リリース： 2016-05-16 17:35:14

オリジナル

1009 人が閲覧しました

jQuery.Validate 検証ライブラリ
1. jquery.validate をダウンロードします。ここでは jquery-validation-1.9.0 を提供します。クリックしてダウンロードします

デフォルトの検証ルール

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

 
（1）必須：真の必須フィールド
（2）リモート： "check.php"が🎜>（4）url：true正しい形式でURLを入力する必要があります
（5）日付： true 日付を正しい形式で入力する必要があります
(6)dateISO:true 日付 (ISO) を正しい形式で入力する必要があります。例: 2009-06-23、1998/01/22 形式のみを確認してください、有効性ではありません
(7)number:true 有効な数字 (負の数、小数) を入力する必要があります
(8)digits:true 整数を入力する必要があります
(9)creditcard: を入力する必要があります法的なクレジット カード番号
(10)equalTo:"#field" 入力値は #field
(11)accept と同じである必要があります: 法的なサフィックス (アップロードされたファイルのサフィックス) が付いた文字列を入力してください 
(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
(17)min:10 を超えることはできません 入力値は 10 未満にすることはできません


デフォルトプロンプト

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

messages: {

必須: "このフィールドは必須です。 "、
リモート: "このフィールドを修正してください。"、
電子メール: "有効な電子メールアドレスを入力してください。"、
url: "有効な URL を入力してください。"、
date: "有効な日付を入力してください。"、
dateISO: "有効な日付 (ISO) を入力してください。"、
dateDE: "Bitte geben Sie ein Gumeltiges Datum ein."、
number: "有効な番号を入力してください。"、
numberDE:"Bitte geben Sie eine Nummer ein."、
数字:"数字のみを入力してください。"、
creditcard:"有効なクレジットカードを入力してください",
equalTo: "同じ値を再度入力してください。",
accept: "有効な拡張子を付けて値を入力してください。",
maxlength: $.validator.format("入力してください{ 0} 文字以内にしてください。")、
minlength: $.validator.format("少なくとも {0} 文字を入力してください。")、
rangelength: $.validator.format(" {0 } から {1} 文字までの値を入力してください。")、
範囲: $.validator.format("{0} から {1} までの値を入力してください。")、
最大: $. validator.format( "{0} 以下の値を入力してください。"),
min: $.validator.format("{0} 以上の値を入力してください。")
}、

変更する必要がある場合は、次の JS コードをmessages_cn.js として保存し、ページ上で引用します:

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

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

jQuery.extend(jQuery .validator.messages, {
 required : "必須フィールド",
 Remote: "このフィールドを修正してください",
 email: "正しい電子メール形式を入力してください",
 url: "入力してください法的な URL",
 date: "法的な日付を入力してください",
 dateISO: "法的な日付 (ISO) を入力してください。",
 number: "法的な番号を入力してください",
 数字: "整数のみを入力できます",
 クレジットカード: "有効なクレジット カード番号を入力してください",
 等しいTo: "同じ値を再度入力してください",
 受け入れ: "文字列を入力してください有効なサフィックスを付けてください",
 maxlength: jQuery.validator.format("少なくとも {0} の長さの文字列を入力してください"),
 minlength: jQuery.validator.format("文字列を入力してください少なくとも {0} の長さ") ,
 rangelength: jQuery.validator.format("{0} から {1} までの長さの文字列を入力してください"),
 range: jQuery.validator .format("{0} から {1} までの値を入力してください"),
 max: jQuery.validator.format("{0} までの値を入力してください"),
 min : jQuery.validator.format ("Please enter a minimum value of {0}")
});

使用方法
1. コントロールに検証ルールを書き込む

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

<スクリプト言語="JavaScript" type="text/JavaScript" src="jquery.metadata.js">

class="{} " メソッドを使用するには、パッケージ jquery.metadata.js

を導入する必要があります。
次のメソッドを使用してプロンプトの内容を変更できます

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

 上記のコードは次のことを意味します: 名フィールドに内容が入力されていない場合は、次のプロンプトが表示されます: 内容を入力してください。では、記入内容の長さが 5 文字未満の場合、ユーザーにどのように記入を促すべきでしょうか?以下のコードを見てください: 

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

注:equalTo キーワードを使用する場合、次のコードに示すように、次の内容を引用符で囲む必要があります:

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

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

別の方法では、キーワード: meta を使用します。

たとえば、上記の例のコードをキーワードメタフォームに変更すると、コードは次のようになります:

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

<スクリプト言語="JavaScript" タイプ= "テキスト/JavaScript" src="jquery-1.6.1.js">
<スクリプト言語="JavaScript" タイプ="テキスト/JavaScript" src ="jquery.validate.min. js">

<スクリプト言語="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"> ;

注意：规则部分使用完全形、つまり

正确写法：

复制代代码如下:

错误写法：

复制代码代码如下:

2、将校验规则代码中

复制代码代码如下:

<スクリプト言語="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"> ;

<script> $().ready(function() { $("#signupForm").validate({ rules: { 名: "required", email: { 必須: true, メール: true }, パスワード: { 必須: true, 最小長: 5 }, verify_password : { required: true, minlength: 5, 等しい: "#password" } }, メッセージ: { 名: "请输入姓名", email: { 必須: "请输入Email地址", email: "请输入正确のemail地址" }, パスワード: { required: "请输入密码", minlength: jQuery.format("密码不可{0}个字符") }, confirm_password: { required: "请输入确认密码", minlength: "确认密码不可5个字符", equalTo: "两次输入密码不一致不一致" } } }); }); //メッセージ、特定の制御プログラムがない場合、承認された情報を使用します </script>

必須:true 必須须有值

必須:"#aa:checked"id 名が aa の dom である場合、確認が必要です

required:function(){} は真に返され、確認が必要であることを示します（必須のみ有効、その他は無効です。）

後の 2 つは、表に同時に充填または充填しない元素を必要とするためによく使用されます

以下は、上の 3 つの内容について、例によってさらにわかりやすく説明します。。）

必須:"#aa:checked" の例:

复制代代価例:

<スクリプト言語="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"> ;

<script> $().ready(function() { $("#signupForm").validate({ rules: { 名: "required", email: { required: "#open:checked", email: true } }, messages: { firstname: "请输入姓", email: { 必須: "请输入Email地址", email: "请输入正确的email地址" } } }); } ); //messages 、特定のコントロールにメッセージがない場合、承認された情報を使用します </script>

選択中に「開始」すると、電子メールがテストされます。

required:function(){} の例:

复制代価代価以下:

<スクリプト言語="JavaScript" type="text/JavaScript" src="jquery.validate.min.js"> ;

<script> $().ready(function() { $("#signupForm").validate({ rules: { 名: "required", email: { 必須: function() { return true; }, email: function() { return false; } } }, メッセージ: { 名: "请输入姓名", 電子メール: { 必須: "请输入Email地址", メール: "请输入正确的電子メール地址" } } }); }); //messages 、何かの制御項目がない場合、将调用默认的情報 </script>

经过测试得知，即使用email:function(){return false}); false が返されますが、required:function(){return true;}、true が返されます、那么、テストが空かどうかを除いて、電子メールの形式。つまり、email:function(){return false;} は設定されません。次の検査、削除required:function(){return true;}、のみ保持：email:function(){reuturn false;}、当然の確認email格式。 🎜>复制代

代码如下: $("#signupForm").validate({ rules:

{

 名: "必須",
 email:
 {
 email: function()
 {
 return false;
 }
 }
 },
 メッセージ:
 ......


注意：将校验规单独書文件中，上面例中的規則规则中の名，電子メール等，问题あり，入力中有id、または name プロパティ、NaJQuery Validation は、名前プロパティを取得しますか? 検査を通じて、name プロパティを取得します。したがって、ルール内のキーは、id プロパティ値ではなく、入力された name プロパティ値になります。


定义样式代記入

复制代記入

代码如下:/* jQuery.Validate css */input.error{border: 1px の赤点線;}

label.error{

background-image:url('del.gif');
background-repeat:no-repeat;
padding-left:18px;
color: red;
}

input.error は入力コントロールのスタイルを定義します

label.error はエラーメッセージのスタイルを定義します

以下に示すように: