ホームページ ウェブフロントエンド jsチュートリアル jQuery フォーム検証拡張機能 (4)_jquery

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

May 16, 2016 pm 06:18 PM
フォームの検証

週末に書いた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>
/span>


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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Flask-WTF を使用してフォーム検証を実装する方法 Flask-WTF を使用してフォーム検証を実装する方法 Aug 03, 2023 pm 06:53 PM

Flask-WTF を使用してフォーム検証を実装する方法 Flask-WTF は、Web フォーム検証を処理するための Flask 拡張機能であり、ユーザーが送信したデータを検証するための簡潔かつ柔軟な方法を提供します。この記事では、Flask-WTF 拡張機能を使用してフォーム検証を実装する方法を説明します。 Flask-WTF のインストール Flask-WTF を使用するには、まずインストールする必要があります。 pip コマンドを使用してインストールできます。 pipinstallFlask-WTF 必要なモジュールを F にインポートします。

Laravel 開発: Laravel Validation を使用してフォームリクエストを検証する方法? Laravel 開発: Laravel Validation を使用してフォームリクエストを検証する方法? Jun 13, 2023 pm 01:34 PM

Laravel は、開発者の作業をスピードアップするための便利な機能を多数提供する人気の PHP Web 開発フレームワークです。その中でも、LaravelValidation は、フォームリクエストやユーザーが入力したデータを簡単に検証するのに役立つ非常に実用的な関数です。この記事では、LaravelValidation を使用してフォームリクエストを検証する方法を紹介します。 LaravelValidationとはLaravelValidationとはLa

Golang を使用して Web アプリケーションのフォーム検証を実装する方法 Golang を使用して Web アプリケーションのフォーム検証を実装する方法 Jun 24, 2023 am 09:08 AM

フォーム検証は Web アプリケーション開発において非常に重要なリンクであり、フォーム データを送信する前にデータの有効性をチェックして、アプリケーションのセキュリティ脆弱性やデータ エラーを回避できます。 Web アプリケーションのフォーム検証は、Golang を使用すると簡単に実装できます。この記事では、Golang を使用して Web アプリケーションのフォーム検証を実装する方法を紹介します。 1. フォーム検証の基本要素 フォーム検証の実装方法を紹介する前に、フォーム検証の基本要素が何であるかを知る必要があります。フォーム要素: フォーム要素は

PHPでCodeIgniter4フレームワークを使用するにはどうすればよいですか? PHPでCodeIgniter4フレームワークを使用するにはどうすればよいですか? May 31, 2023 pm 02:51 PM

PHP は非常に人気のあるプログラミング言語であり、CodeIgniter4 は一般的に使用される PHP フレームワークです。 Web アプリケーションを開発する場合、フレームワークを使用すると、開発プロセスのスピードアップ、コードの品質の向上、メンテナンス コストの削減が可能になり、非常に役立ちます。この記事ではCodeIgniter4フレームワークの使い方を紹介します。 CodeIgniter4 フレームワークのインストール CodeIgniter4 フレームワークは、公式 Web サイト (https://codeigniter.com/) からダウンロードできます。下

PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 Aug 01, 2023 am 08:51 AM

PHP フォーム検証のヒント: filter_input 関数を使用してユーザー入力を検証する方法 はじめに: Web アプリケーションを開発する場合、フォームはユーザーと対話するための重要なツールです。ユーザー入力を正しく検証することは、データの整合性とセキュリティを確保するための重要な手順の 1 つです。 PHP には、ユーザー入力を簡単に検証してフィルタリングできる filter_input 関数が用意されています。この記事では、filter_input 関数を使用してユーザー入力を検証する方法を紹介し、関連するコード例を示します。 1つ、

Laravelでミドルウェアを使用してフォーム検証を処理する方法 Laravelでミドルウェアを使用してフォーム検証を処理する方法 Nov 02, 2023 pm 03:57 PM

ミドルウェアを使用して Laravel でフォーム検証を処理する方法、特定のコード例が必要です はじめに: フォーム検証は Laravel で非常に一般的なタスクです。ユーザーが入力したデータの有効性と安全性を確保するために、当社は通常、フォームに送信されたデータを検証します。 Laravel は便利なフォーム検証機能を提供しており、フォーム検証を処理するためのミドルウェアの使用もサポートしています。この記事では、ミドルウェアを使用してLaravelでフォーム検証を処理する方法を詳しく紹介し、具体的なコード例を示します。

PHP でのフォーム検証とフィルタリングの方法は? PHP でのフォーム検証とフィルタリングの方法は? Jun 29, 2023 pm 10:04 PM

PHP は Web 開発で広く使用されているスクリプト言語であり、そのフォーム検証とフィルタリングは非常に重要な部分です。ユーザーがフォームを送信するとき、データのセキュリティと有効性を確保するために、ユーザーが入力したデータを検証およびフィルタリングする必要があります。この記事では、PHP でフォームの検証とフィルタリングを実行する方法とテクニックを紹介します。 1. フォーム検証 フォーム検証とは、ユーザーが入力したデータをチェックして、データが特定のルールおよび要件に準拠していることを確認することを指します。一般的なフォーム検証には、必須フィールド、電子メール形式、携帯電話番号形式の検証が含まれます。

ThinkPHP6 でフォーム検証を実行するにはどうすればよいですか? ThinkPHP6 でフォーム検証を実行するにはどうすればよいですか? Jun 12, 2023 am 09:36 AM

ThinkPHP6 は、Web アプリケーションの開発を大幅に簡素化する PHP ベースの MVC フレームワークです。その中でもフォームバリデーションは非常に基本的かつ重要な機能です。この記事では、ThinkPHP6 でフォーム検証操作を実行する方法を紹介します。 1. 検証ルールの定義 ThinkPHP6 では、コントローラ内で検証ルールを定義する必要があります。以下に示すように、コントローラ内で $validate 属性を定義することでルールを定義できます。

See all articles