jQuery 検証のサンプルコードにより検証が簡単になります

jQuery 検証のサンプルコードにより検証が簡単になります_jquery

WBOY

リリース： 2016-05-16 18:18:16

オリジナル

1041 人が閲覧しました

クライアント側検証を使用すると、サーバーとクライアント間のデータトリップの数を効果的に減らすことができ、サーバーのリソース使用率の向上に有益であり、ユーザーに直観的かつ迅速な応答を提供することもできます。 Web 2.0 の時代では、これは特に重要です。私と同じように、誰もが基本的な JavaScript で書かれた面倒な検証を嫌うはずです。現在では、サーバー側の検証用の優れたフレームワークがあり、ASP.NET MVC はこのような作業を非常にうまく実行できます。そのため、.net 開発では、優れたクライアント側のメンテナンスフレームワークが開発効率の向上に重要な役割を果たします。

この JS フレームワークは次のアドレスから入手できます

簡単な例から jクエリ検証フレームワークの理解を始めましょう

まず、上記 2 つの JS ファイルへの参照を追加する必要があります

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

無題ページ

次に、次の HTML セグメントを宣言します

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

上記のコードにより、class= が追加されたことがわかります。各入力に「必須」を入力します。その機能は、入力タグが空の場合にユーザーにエラーを要求することです。
最後に、フレームワークのエントリポイントを見つける必要があります。通常は、HTML の最後に次のコードを配置します。

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

実行して動作を確認してください

ListBox コントロールの定期的な検証を作成するための以下の大きな例を見てください

次のようなルールを追加できます

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

$("#customerForm").validate(

{ 
rules: 
{ 
FirstName: { required:true }、
姓 : { required:true }、
国: { validateCountries:true } 
}、
メッセージ: 
{ 
名: { 必須: "名は必須です" }, 
 LastName: { 必須: "姓は必須です" }, 
国: { validateCountries:"国から少なくとも 2 つの項目を選択してください" } 
}, 

}); 
 // 国の検証メソッドを追加します 
jQuery.validator.addMethod("validateCountries", function(value, element) 
{ 
var noOfSelectedCountries = $("#国 :selected").length; 
if(noOfSelectedCountries < 2) return false; 
return true; 
}); 

提供エラーエラーの情報

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

 
$("#customerForm").validate( 
{ 
rules: 
{ 
FirstName: { required:true }, 
LastName: { required:true } , 
Countries: { validateCountries:true } 
}, 

messages: 
{ 
FirstName: { required: "First Name is required" }, 
LastName: { required: "Last Name is required" }, 
Countries: { validateCountries:"Please select at least 2 items from the Countries" } 
}, 

errorContainer:"#errors", 
errorLabelContainer:"#errors ul", 
wrapper:"li" 

}); 