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=="<") 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:

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

関連ラベル：

フォームの検証

ソース：php.cn

前の記事：JQuery EasyUIダイアログボックスの使い方_jquery 次の記事：document.writeとwritelnの出力内容の違いを解説_基礎知識

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

単語と一致する正規表現 新しいジョブ名をデータベース内の既存のジョブ名と照合しようとするスクリプトがあります。 SELECTa.titleASJobTitle,j.DescriptionASMatched...

から 2024-04-06 21:24:04

0

1

606

MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...

から 2024-04-06 19:39:29

0

1

441

無効な React 子要素 (見つかった: キー {clientVersion} を持つオブジェクト)。子要素のコレクションをレンダリングする場合は、代わりに配列を使用してください 複数ステップのフォームを持っているのですが、送信しようとするとこのエラーが表示されます。ただし、createOrganization スケジュールを単純な形式で使用すると、機能しま...

から 2024-04-06 16:25:39

0

1

346

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

ログインせずに Firebase を使用して Vue でユーザーを作成する ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...

から 2024-04-06 14:20:12

0

1

514

関連トピック

詳細>

• erpフリーソフト
• URLは何を意味しますか
• lightbox.js
• ビュークスとは何ですか
• Wordの背景色を白に変更する方法
• Linuxファイアウォールの設定方法
• C言語での疑問符表現の使い方
• file_get_contents