JQuery は簡単な検証コード プロンプトを実装します solution_jquery

まずレンダリングを見てみましょう:

要件: 入力ボックスにフォーカスがあると、検証画像が自動的に表示されます。
コードは次のとおりです (学習および参照のみ):

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

/************************以下は検証コードオブジェクトです******************/
var Validation = {};
Validation.init = function(eleName,imageSrc){
this.image = imageSrc; >$('#' eleName).focusin(function(){
Validation.show(eleName);
});
}
Validation.image = '';表示 = false;
Validation.width = '100px';
Validation.div = null;
if(this.display= =false){
//最初の表示
if(this.div==null){
$('#' eleName).after('

');
this.div = $('#div_validation_' eleName);
this .div.css('位置 ','絶対');
this.div.css('カーソル','ポインタ');
this.div.css('ボーダー','1px ソリッド #CCC ');
this .div.css('background-color','#FFF');
this.div.css('background-position','center'); .css('background-repeat ','no-repeat');
this.div.css('height',this.height);
this.div.css('width',this.width); );
var objOffset = $('#' eleName).offset();
objOffset.top =$('#' eleName).height() 6;
this.div.offset(objOffset) );
this.div.css('background-image','url(' Validation.image '&_t=' new Date() ')');
this.div.css('display', 'inline-block');
this.display = true
//クリックして
this.div.click(function(){
Validation.div.css('background-image) ','url(' 検証。画像 '&_t=' new Date() ')');
}
else{
this.div.css('background-image) ','url(' 検証。画像 '&_t=' new Date() ')');
this.display = true
this.div.css('display','inline-block'); ;
}
}
}
Validation.hide =function(){
if(this.display==true){
this.display = false; .div.hide();
}
}



使用法
:

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

//検証コード オブジェクトの初期化Validation.init('validation','Ajax.ashx?handle=validation') ; //入力ボックス ID 検証画像アドレス//HideValidation.hide();