jqueryフォーム検証に合格しましたクラス検証フォームが空ではありません_jquery
システムを開発する際、特定のフォームデータが必要になることがよくありますが、jQueryを使ってID認証を行うと効率が悪くなるだけでなく、漏れが発生して後のメンテナンスが困難になります。
この章では、jQuery を使用してフォームのクラスを構成することで統合検証を実行する方法を紹介します。 (ID はページ内で 1 回のみ使用できます。クラスは複数回参照できます)
1: 入力にクラスを追加します。名前は任意に設定できますが、この章では calss を noNull に設定する必要があります。 (入力にすでに class 属性がある場合は、その直後に追加できます)
2: 入力に属性を追加して、後で jquery を通じてフィールドを取得し、それをプロンプトとして使用します。この章のケース プロンプト属性は notNull です。
3: jQuery を使用して、ページ内の calss noNull を持つすべてのフォームを走査し、それが空であるかどうかを確認し、notNull フィールドを取得して空のプロンプトを提供します。
詳しい設定方法は下記事例をご参照ください。この章では、入力、無線、選択、チェックボックスなどの種類について説明します。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
<!-- input -->
<div>
姓名: <input type="text" name="name" notNull="姓名" class="form-control noNull">
</div>
<br>
<!-- radio -->
<div>
性别:
男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
女<input type="radio" name="sex" value="1" >
</div>
<br>
<!-- select -->
<div>
年龄：
<select name="age" class="noNull" notNull="年龄">
<option value ="">请选择</option>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</div>
<br>
<!-- checkbox -->
<div>
兴趣：
打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">
唱歌<input type="checkbox" name="hobby" value="2">
跳舞<input type="checkbox" name="hobby" value="3">
</div>
<br>
<button type="button" class="btn-c" onclick="bubmi()">保存</button>
</form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
$(".noNull").each(function(){
var name = $(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能为空");return false;
}
if($(this).attr("type")=="radio"){
if ($("input[name='"+name+"']:checked").size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
if($(this).attr("type")=="checkbox"){
if ($('input[name="'+name+'"]:checked').size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
})
}
</script>
</body>
</html>以下では、jquery.validate.js 検証プラグインを紹介します
jquery.validate.js は jquery の検証プラグインであり、jquery の利点を利用して、いくつかの一般的な入力を迅速に検証し、独自の検証メソッドを拡張できます。
たとえば、次のようなフォームがあります:
<form id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" class="required"/> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" /> </p> <p> <label for="username">Username</label> <input id="username" name="username" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">Email</label> <input id="email" name="email" /> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
このフォームには、名、姓、ユーザー名、パスワード、確認用パスワード、電子メールが含まれます。それらはすべて空ではなく、電子メールが適切にフォーマットされたアドレスであり、確認用パスワードと一貫したパスワードである必要があります。 jQuery 検証を使用する最も簡単な方法は、jquery.js と jquery validation.js という 2 つの js ファイルを導入することです。次に、それぞれ入力にクラスを追加します。
<input id="firstname" name="firstname" class="required"/> <input id="lastname" name="lastname" class="required"/> <input id="username" name="username" class="required"/> <input id="password" name="password" type="password" class="required"/> <input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/> <input id="email" name="email" class="required email"/>
以下は、validate に付属するデフォルトの検証のリストです
必須: "必須フィールド"、
リモート: "このフィールドを修正してください",
email: "メールの正しい形式を入力してください",
url: "正規の URL を入力してください",
date: "法的な日付を入力してください",
dateISO: "有効な日付 (ISO) を入力してください。",
番号: "有効な番号を入力してください",
数字: "整数のみを入力できます",
Creditcard: "有効なクレジット カード番号を入力してください",
qualTo: "同じ値を再度入力してください",
accept: "有効なサフィックスを含む文字列を入力してください",
maxlength: jQuery.format("長さが {0} 以内の文字列を入力してください"),
minlength: jQuery.format("少なくとも {0} の長さの文字列を入力してください"),
rangelength: jQuery.format("{0} から {1} までの長さの文字列を入力してください"),
range: jQuery.format("{0} から {1} までの値を入力してください"),
max: jQuery.format("{0}までの値を入力してください"),
min: jQuery.format("最小値 {0} を入力してください")
次に、ドキュメントの読み取りイベントに次のメソッドを追加します。
<script>
$(document).ready(function(){
$("#signupForm").validate();
}
</script>このようにして、フォームが送信されると、入力で指定されたクラスに基づいて検証されます。失敗した場合、フォームの送信はブロックされます。そして、入力の後ろにプロンプト情報が表示されます。
しかし、検証ルールが HTML コードに侵入するので、これは気分が悪いです。もう一つの方法は、「ルール」を使用することです。入力の検証クラスを削除します。次に、ドキュメントの Ready イベント応答コードを変更します:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
}
});
})この方法でも同様の効果が得られます。
では、次の疑問は、表示されるエラーメッセージがデフォルトなのかということです。カスタム プロンプトを使用する必要があります:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:"required",
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:"必填项",
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})エラー メッセージに特別なスタイル (フォントが赤など) も表示したい場合は、以下を追加できます:
<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>入力パスワードの長さの検証ルールを引き続き追加します:
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:"required",
lastname:"required",
username:"required",
password:{
required:true,
minlength:4,
maxlength:15
},
confirm_password:{
required:true,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
firstname:"必填项",
lastname:"必填项",
username:"必填项",
password:{
required:"必填项",
minlength:jQuery.format("密码长度不少于{0}位"),
maxlength:jQuery.format("密码长度不超过{0}位")
},
confirm_password:{
required:"必填项",
equalTo:"密码不一致"
},
email:{
required:"必填项",
email:"格式有误"
}
}
});
})リモートを使用する
イベントを通じてエフェクトのトリガー方法を指定できます (オプションの値には、キーアップ (キーが押されるたび)、ブラー (コントロールがフォーカスを失ったとき) が含まれます。指定しない場合は、送信ボタンが押されたときにのみトリガーされます)押した）
$(document).ready(function(){
$("#signupForm").validate({
event:"keyup" || "blur"
})
})debug を true に指定すると、フォームは送信されず、検証のみに使用され (デフォルトは送信)、デバッグにも使用できます
$(document).ready(function(){
$("#signupForm").validate({
debug:true
})
})送信する前にカスタム処理を実行する必要がある場合は、submitHandler パラメータを使用します
$(document).ready(function(){
$("#signupForm").validate({
SubmitHandler:function(){
alert("success");
}
})
})
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7469
15
1376
52
77
11
19
28
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？
Mar 18, 2025 pm 03:14 PM
この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:16 PM
この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。
ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？
Mar 18, 2025 pm 03:17 PM
この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。
Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか？
Mar 13, 2025 pm 12:28 PM
この記事では、Javaのコレクションフレームワークの効果的な使用について説明します。 データ構造、パフォーマンスのニーズ、スレッドの安全性に基づいて、適切なコレクション（リスト、セット、マップ、キュー）の選択を強調しています。 コレクションの使用を効率的に最適化します
初心者向けのタイプスクリプト、パート2：基本データ型
Mar 19, 2025 am 09:10 AM
エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull
chart.js：パイ、ドーナツ、バブルチャートを始めます
Mar 15, 2025 am 09:19 AM
このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。 パイとリングチャートを作成します パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。 パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します
