jQuery フォーム検証拡張機能 (4)_jquery

/**
* onFocusText: フォーカス プロンプト テキストを取得します
* onFocusClass: フォーカス スタイルを取得します
* onEmptyText: 入力項目が空の場合にテキストを表示します
* onEmptyClass: 入力項目が空の場合にスタイルを表示します
* onErrorText :検証エラー表示文字
* onErrorClass:入力検証エラー表示形式
* onSuccessText:入力成功表示文字
* onSuccessClass:入力成功表示形式
* comType:比較タイプ
* dataType: 入力比較内容のデータ型
* comId: 比較対象のコントロール ID
* targetId: プロンプト情報の表示に使用するコントロール ID
* @param {Object} inputArg
*/
$.fn.extend({
checkCompare:function(inputArg){
//入力ボックスの情報のみを確認します
if($ (this).is("input") || $(this).is("textarea")){
if($(this).attr ("type")!="radio" && $(this ).attr("type")!="checkbox"){
//フォーカス イベントをバインドします
$(this).bind("focus ",function(){
var value=$ (this).val();
if(value!=unknown && value!=""){
}else{
//表示フォーカスされたテキスト
addText(inputArg.targetId,inputArg .onEmptyText); >//フォーカス喪失イベントをバインドします
$( this).bind("blur",function(){
var value=$(this).val();
if(value==unknown || value==""){
/ /フォーカスされたテキストを表示します
addText(inputArg.targetId,inputArg.onEmptyText);
//スタイルを切り替えます
addClass(inputArg.targetId,inputArg. onEmptyClass);
}else{
var targetValue=$("#" inputArg.comId).val();
switch(inputArg.dataType){
case "text":
if(inputArg.comType == "=="){
flag=value==targetValue?true:false;
}else if(inputArg.comType==!= "){
flag=value!=targetValue? true:false;
}
break;
case "数値":
if(inputArg.comType=="=="){
flag=value==targetValue?true:false ;
}else if(inputArg.comType=="!="){
flag=value!=targetValue?true:false; else if(inputArg.comType==">") {
flag=value>targetValue?true:false;
}else if(inputArg.comType==">="){
flag =value>=targetValue?true:false;
}else if(inputArg.comType=="<"){
flag=value}else if(inputArg.comType=="<") comType=="<="){
flag=value<=targetValue?true:false;
}
case "日付":
break;
if(flag){
// フォーカスされたテキストを表示します
addText(inputArg.targetId, inputArg.onSuccessText)
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onSuccessClass) );
}else{
// フォーカスされたテキストを表示します
addText(inputArg.targetId, inputArg.onErrorText);
//スタイルを切り替えます
addClass(inputArg.targetId, inputArg.onErrorClass) );
}
}
});
}
}


このコードは実際には非常に単純です。複雑な判断を必要とせず、単に異なるタイプの値を比較するだけであり、比較制御タイプの text 要素と textarea 要素も制限しています。これにより、複雑な検証が大幅に簡素化されます。このコードも比較的合理化されており、ここでの単純化は関数の削減ではなく、コードの再構築とメソッドの抽出です。ここでは、前の記事の関数メソッドを使用して、テキストを追加し、スタイル情報を変更します。
テキストとスタイル情報の追加関数コード分析

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

/**
* さまざまなタイプの入力ボックスに基づいて決定
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//正しいメッセージ テキストを表示します
addText( inputArg.targetId, inputArg.onSuccessText);
//スタイルの切り替え
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//エラー メッセージのテキストを表示します
addText( inputArg.targetId, inputArg.onErrorText);
//スタイルの切り替え
addClass(inputArg.targetId,inputArg.onErrorClass);
/**
* 表示するテキスト情報をターゲットコントロールに追加
* @param {Object} targetId ターゲットコントロール ID
* @param {Object} text 表示するテキスト情報
*/
関数 addText (targetId,text){
if(text==unknown){
text="";
}
$("#" targetId).html(" " " text );
}
/**
* スタイルの切り替え
* @param {Object} targetId ターゲット コントロール ID
* @param {Object} className 表示スタイル名
*/
function addClass(targetId,className){
if(className!=unknown && className!=""){
$( "#" targetId) .removeClass();
$("#" targetId).addClass(className);
}
}


内容は変わりません。変更は加えられていないので、ここに再度投稿します。このコードはメソッド本体を見やすくするために含まれており、他の目的はありません。

(4). 使用例

文字列間のレンダリングの比較

フォーカス取得時のプロンプト

フォーカス喪失検証エラー メッセージ

フォーカスを失い、正常に検証されました

上記は文字の比較検証です

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

<スクリプト言語= "JavaScript" type="text/javascript" src="jquery-1.3.2.min.js">
<スクリプト言語="JavaScript" type= text/javascript" src= "jquery-extend-1.0.0.js">

< ;p>
パスワード 1: /span>

パスワード 2:span id="txtPass2Tip">

番号間の検証

デジタル検証にフォーカス プロンプト機能が追加されました

デジタル検証はフォーカスを失い、検証が失敗しました

デジタル検証はフォーカスを失い、検証は成功しました

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

="JavaScript" type ="text/javascript" src="jquery-1.3.2.min.js">

パスワード 2:

これも説明したくない記事の内容については前回と同様に非常に簡単です。フォーム検証拡張機能は常に更新されており、フォローアップを楽しみにしています....