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

週末に書いたjQueryフォーム検証拡張 (3) この記事のクリック率が低すぎるのは、記事の質が低すぎるためなのか、それとも私が書いている他の理由によるのかわかりません。この記事は、コードを書く上での私の経験を共有すると同時に、私が学んだことを整理することを目的としています。記事内に問題がある場合は、修正してください。この記事では、jQuery フォーム検証拡張機能におけるコントロール値の比較

(1) 既存の問題点
で述べたコントロール値の違いについて紹介します。この記事と最初の記事では大きな違いはなく、唯一の違いはスタイルの処理です。同時にコードも簡素化されます。ただし、この記事は非常に簡単なので、ここで個別に説明します。

(2). パラメータの概要
onFocusText: フォーカス プロンプト テキストを取得します
onFocusClass: フォーカス スタイルを取得します
onEmptyText: 入力項目が空の場合にテキストを表示します
onEmptyClass: 入力項目が空の場合の表示形式
onErrorText: 検証エラーの表示形式
onErrorClass: 入力検証エラーの表示形式
onSuccessText: 入力成功の表示形式
onSuccessClass: 入力成功の表示形式
comType :比較タイプ
dataType:比較内容のデータ型を入力
dataType:比較内容のデータ型を入力
comId:比較対象のコントロールID
targetId:表示に使用するコントロールIDプロンプト情報

ここでの比較タイプは次のカテゴリに分類されます: “==” “!=” “>=” “データ型は次のように分けられます。 「テキスト」「数値」「日付」
日付データ型については、ここでは何も処理されていません。後の処理で更新されます

(3). コントロール値間でソースコード解析を比較
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==" flag=value}
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). 使用例

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

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

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

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

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

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

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

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


番号間の検証

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

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

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

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

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

p>

パスワード 2:

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