フォームバリデーションプラグインのサンプル説明 Validation application_jquery
May 16, 2016 pm 03:37 PM
jquery.Validation は、クライアント フォームを検証でき、優(yōu)れたスケーラビリティを備えた多くのカスタマイズ可能なプロパティとメソッドを提供する優(yōu)れた jquery プラグインです。実際の狀況と合わせて、プロジェクトでよく使用される検証をサンプル DEMO にまとめました。この記事は、この例を説明することで Validation の応用を理解することを目的としています。
この例に含まれる検証は次のとおりです:
ユーザー名: 長さ、文字検証、再現(xiàn)性 Ajax 検証 (既に存在するかどうか)。
パスワード: 長さの確認(rèn)、パスワードの確認(rèn)の繰り返し。
電子メール: 電子メール アドレスの確認(rèn)。
固定電話: 中國本土の固定電話番號の確認(rèn)。
攜帯電話番號: 中國本土の攜帯電話番號の確認(rèn)。
URL: Web サイトの URL アドレスの検証。
日付: 標(biāo)準(zhǔn)の日付形式の検証。
數(shù)値: 整數(shù)、正の整數(shù)の検証、數(shù)値範(fàn)囲の検証。
ID カード: 中國本土の ID 番號の確認(rèn)。
郵便番號: 本土の郵便番號を確認(rèn)します。
ファイル: ファイル タイプ (サフィックス) の検証。たとえば、畫像のみのアップロードが許可されます。
IP: IP アドレスの検証。
検証コード: 検証コード ajax 検証。
使用法:
1. jquery プラグインと jquery.validate プラグインを準(zhǔn)備します
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>
2. CSS スタイルを準(zhǔn)備します
ページ スタイルの詳細(xì)については説明しません。獨自のスタイルを作成することも、デモ ページのソース コードを參照することもできます。ここで強調(diào)すべき重要なスタイルは、検証情報を表示するスタイルです:
label.error{color:#ea5200; margin-left:4px; padding:0px 20px;
background:url(images/unchecked.gif) no-repeat 2px 0 }
label.right{margin-left:4px; padding-left:20px; background:
url(images/checked.gif) no-repeat 2px 0}
3.XHTML
<form id="myform" action="#" method="post"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> <tr class="table_title"> <td colspan="2">jquery.validation 表單驗證</td> </tr> <tr> <td width="22%" align="right">用戶名：</td> <td><input type="text" name="user" id="user" class="input required" /> <p>用戶名為3-16個字符，可以為數(shù)字、字母、下劃線以及中文</p></td> </tr> <tr> <td align="right">密碼：</td> <td><input type="password" name="pass" id="pass" class="input required" /> <p>最小長度:6 最大長度:16</p> </td> </tr> <tr> <td align="right">確認(rèn)密碼：</td> <td><input type="password" name="repass" class="input required" /></td> </tr> </table> </form>
ラベルに「必須」クラス スタイルを與えたことは言及する価値があります。その機能については以下で説明します。
4. 検証プラグインを適用します
Validation プラグインを呼び出すメソッド:
$(function(){
var validate = $("#myform").validate({
rules:{ //定義驗證規(guī)則
......
},
messages:{ //定義提示信息
......
}
})
});
rules: 検証ルールを key:value の形式で定義します。key は検証される要素で、value は文字列またはオブジェクトです。たとえば、ユーザー名の長さを確認(rèn)し、空にすることを許可しません:
rules:{
user:{
required:true,
maxlength:16,
minlength:3
},
......
}
実際には、XHTML コード內(nèi)で必要に応じて input の class 屬性を直接指定できるため、JS 部分で繰り返し記述する必要はありません。メール等の検証と同様に、inputのclass屬性を直接メールに設(shè)定します。
メッセージ: プロンプト メッセージを key:value の形式で定義します。key は検証対象の要素で、値は検証が失敗したときに表示されます。
messages:{
user:{
required:"用戶名不能為空！",
remote:"該用戶名已存在，請換個其他的用戶名！"
},
......
}
この例に含まれる検証 JS は、上記のルールに従って記述されており、検証プラグインは次のように多くの基本的な検証メソッドをカプセル化します。
required:true には値が必要であり、空にすることはできません
Remote:url を使用すると、ユーザー名がすでに存在するかどうかを判斷できます。サーバーは true を出力し、検証に合格したことを示します
minlength:6 最小の長さは 6 です
maxlength:16 最大長は 16 です
rangelength: 範(fàn)囲の長さ
range:[10,20] 値の範(fàn)囲は 10 ～ 20 です
電子メール: 本物の確認(rèn)メール
url:true 確認(rèn) URL
dateISO:true 日付形式 'yyyy-mm-dd' を確認(rèn)します
數(shù)字:true は數(shù)字のみです
accept:'gif|jpg' は、接尾辭が gif または jpg の畫像のみを受け入れます。ファイルの検証によく使用される拡張子
qualTo:'#pass' はフォーム フィールドの値と等しく、パスワードの繰り返し入力を検証するためによく使用されます
さらに、プロジェクトの実際の狀況に基づいていくつかの検証も拡張しました。検証コードは validate-ex.js にあります。この JS は使用前にロードする必要があります。次の検証が提供されます:
userName:true ユーザー名には、漢字、英字、數(shù)字、アンダースコアのみを含めることができます
isMobile:本當(dāng)の攜帯電話番號の確認(rèn)
isPhone:true 本土の攜帯電話番號の確認(rèn)
isZipCode:本當(dāng)の郵便番號の検証
isIdCardNo:true 中國本土の ID 番號の確認(rèn)
ip:true IP アドレスの検証
上記で提供した検証方法は、基本的にほとんどのプロジェクトのニーズを満たします。他に特別な検証要件がある場合は、次のように拡張できます:
jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "請正確填寫您的郵政編碼!");
トラブルシューティング:
1. プロジェクトにユーザー名が存在するかどうかを確認(rèn)したところ、中國語入力の検証がサポートされていないことが判明しました。私の解決策は、encodeURIComponent でユーザー名をエンコードし、バックグラウンド PHP を使用して受け入れられた値を URL デコードすることです
user:{
remote: {
url: "chk_user.php", //服務(wù)端驗證程序
type: "post", //提交方式
data: { user: function() {
return encodeURIComponent($("#user").val()); //編碼數(shù)據(jù)
}}
}
},
<?php
$request = urldecode(trim($_POST['user']));
usleep(150000);
$users = array('月光光', 'jeymii', 'Peter', 'helloweba');
$valid = 'true';
foreach($users as $user) {
if( strtolower($user) == $request )
$valid = 'false';
}
echo $valid;
?>
我使用的服務(wù)端程序是PHP，您也可以使用ASP，ASP.NET，JAVA等。此外本例為了演示，用戶名數(shù)據(jù)是直接寫在服務(wù)端的，真正的應(yīng)用是從數(shù)據(jù)庫里取出的用戶名數(shù)據(jù)，來和接收客戶端的數(shù)據(jù)進(jìn)行對比。
2、在驗證checkbox和radio控件時，驗證信息不會出現(xiàn)在最后的控件文本后面，而是直接跟在第一個控件的后面，不符合我們的要求。
解決辦法是在validate({})追加以下代碼：
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo ( element.parent() );
else if ( element.is(":checkbox") )
error.appendTo ( element.parent() );
else if ( element.is("input[name=captcha]") )
error.appendTo ( element.parent() );
else
error.insertAfter(element);
}
3、重置表單。Form表單原始的重置方法是reset自帶
<input type="reset" value="重 置" />
點擊“重置”按鈕，表單元素將會重置，但是再運行Validation插件后，驗證的提示信息并沒重置，就是那些提示信息沒有消失。感謝Validation提供了重置表單的方法：resetForm()
$("input:reset").click(function(){
validate.resetForm();
});
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強力な機能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請願書を提出しました。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
JSラウンドアップ：JavaScriptイベントループに深く潛り込む
Jul 08, 2025 am 02:24 AM
JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします?？栅螆龊稀ⅴ畅`ルバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。
JavaScript DOMイベントでのイベントの泡立ちとキャプチャの理解
Jul 08, 2025 am 02:36 AM
イベントの泡は、ターゲット要素から祖先ノードに外側(cè)に伝播し、イベントキャプチャは外側(cè)の層からターゲット要素に內(nèi)側(cè)に伝播します。 1。イベントバブル：子要素をクリックした後、イベントは親要素のリスナーを上向きにトリガーします。たとえば、ボタンをクリックした後、最初に保育を出してから、親クリックしました。 2。イベントキャプチャ：3番目のパラメーターをtrueに設(shè)定して、リスナーが[親子要素のキャプチャリスナー]をクリックする前に[親要素のキャプチャリスナーをトリガーするなど、キャプチャステージで実行されるようにします。 3.実用的な用途には、子どもの要素イベントの統(tǒng)一された管理、傍受前処理、パフォーマンスの最適化が含まれます。 4. DOMイベントストリームは、キャプチャ、ターゲット、バブルの3つの段階に分割され、デフォルトのリスナーはバブルステージで実行されます。
マップとフィルターを超えて高次関數(shù)のJSラウンドアップ
Jul 10, 2025 am 11:41 AM
JavaScriptアレイには、Map and Filterに加えて、他の強力で使用されていない方法があります。 1.還元は、合計するだけでなく、カウント、グループ、フラットンアレイ、新しい構(gòu)造を構(gòu)築することもできます。 2。FindおよびFindIndexは、個々の要素またはインデックスを見つけるために使用されます。 3.一部とすべてが條件が存在するか、すべての出會いかを判斷するために使用されます。 4.ソートはソートできますが、元の配列を変更します。 5.副作用を避けるために、それを使用するときにアレイをコピーすることに注意してください。これらの方法により、コードがより簡潔で効率的になります。
