jQueryを使用してフォーム検証を実装する
HTML の最も重要な部分として、フォームはユーザーの送信情報、ユーザーのフィードバック情報、ユーザーのクエリ情報など、ほぼすべての Web ページに反映されるため、Web サイト管理者と閲覧者の間のコミュニケーションの橋渡しとなります。以下は、コード例を使用して jQuery がフォーム検証を実装する方法を紹介します
フォーム検証
HTML の最も重要なコンポーネントであるフォームユーザーの投稿情報、ユーザーのフィードバック情報、ユーザーのクエリ情報など、ほぼすべての Web ページに反映されるため、Web サイト管理者と閲覧者の間のコミュニケーションの橋渡しとなります。フォームでは、フォーム検証の役割も非常に重要であり、フォームをより柔軟で美しく、豊かなものにすることができます。
簡単なユーザー登録を例に挙げます。まず新しいフォームを作成します。HTML コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQueryStudy</title>
<style type="text/css">
.int{ height: 30px; text-align: left; width: 600px; }
label{ width: 200px; margin-left: 20px; }
.high{ color: red; }
.msg{ font-size: 13px; }
.onError{ color: red; }
.onSuccess{ color: green; }
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<form method="post" action="">
<p class="int">
<label for="name">名称：</label>
<input type="text" id="name" class="required" />
</p>
<p class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</p>
<p class="int">
<label for="address">地址：</label>
<input type="text" id="personinfo" />
</p>
<p class="int">
<input type="submit" value="提交" id="send" style="margin-left: 70px;" />
<input type="reset" value="重置" id="res" />
</p>
</form>
<script type="text/javascript"></script>
</body>
</html>表示効果を図 1 に示します。
図 1 フォームの初期化
フォーム内のクラス属性が "required" のテキスト ボックスは入力する必要があるため、フォームから分離する必要があります。入力する必要があるその他のフォーム以外の要素は、テキスト ボックスの後に赤いアスタリスクを追加することで区別されます。これは、append() メソッドを使用して実行できます。コードは次のとおりです。
<script type="text/javascript">
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
$("form :input.required").each(function () {
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
</script>表示効果を図 2 に示します。
図 2 小さな赤い星でマーク
ユーザーが「名前」テキスト ボックスに情報を入力した後、カーソルのフォーカスを変更します「名前」テキストボックスから 転出の際には、名前が確認規則に適合しているかどうかを直ちに判断する必要があります。カーソルのフォーカスが「メールボックス」テキストボックスの外に移動した場合、「メールボックス」が正しく入力されているかどうかを即座に判断する必要もあるため、フォーカス喪失イベント、つまりブラーイベントを追加する必要があります, form要素に。
jQuery コードは次のとおりです。
<script type="text/javascript">
//为表单的元素添加失去焦点事件
$("form :input").blur(function () {
// ...省略代码
});
</script>フォーム要素を確認する手順は次のとおりです。
(1) 現在フォーカスを失っている要素が「名前」または「メールボックス」を選択し、別々に扱います。
(2) 「name」の場合、要素の値の長さが 6 未満であるかどうかを判断します。6 未満の場合は、入力が間違っていることをユーザーに通知するために赤色のフォントを使用します。 、緑色を使用して、入力が正しいことをユーザーに思い出させます。
(3) 「メールボックス」の場合、要素の値がメールボックスの形式に準拠しているかどうかを判断します。そうでない場合は、入力が間違っていることをユーザーに通知するために赤色のフォントを使用します。緑色のフォントは、入力が正しいことをユーザーに思い出させます。
(4) 現在の親要素の末尾にリマインダー情報を追加します。
注: 使いやすさを高めるため、テキスト テキスト ボックスの内容が間違った形式である場合、プログラムは検証後に各形式に関連するエラー リマインダーのみを表示するのではなく、すべてのプロンプトを表示しようとします。
上記の分析に基づいて、次の jQuery コードを記述することができます:
<script type="text/javascript">
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
$("form :input.required").each(function () {
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();
//验证名称
if($(this).is("#name")){
if($.trim(this.value) == "" || $.trim(this.value).length < 6){
var errorMsg = " 请输入至少6位的名称！";
//class='msg onError' 中间的空格是层叠样式的格式
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
var errorMsg = " 请输入正确的E-Mail地址！";
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
});
</script>間違った形式を連続して数回入力すると、図 3 に示す結果が表示されます
図 3 複数の操作のプロンプト効果
要素がフォーカスを失うたびに、新しいリマインダー要素が作成され、ドキュメントに追加されます。リマインダーメッセージが複数回表示されました。したがって、リマインダー要素を作成する前に、現在の要素の前のリマインダー要素をすべて削除する必要があります。これは、remove() メソッドを使用して実行できます。コードは次のとおりです。
//为表单元素添加失去焦点事件
$("form :input").blur(function(){
var $parent = $(this).parent();
$parent.find(".msg").remove(); //删除以前的提醒元素
// ...省略代码
});表示効果を図 4 に示します。
図 4 正しい効果
フォーム要素内でマウスが複数回フォーカスを失った場合、入力が正しいかどうかをユーザーに思い出させることができます。ただし、ユーザーがエラー通知を無視して「送信」ボタンをクリックすることを要求した場合、フォームに正確に入力するには、フォームを送信する前にフォームの必須要素を完全に検証する必要があります。 trigger() メソッドを直接使用してブラー イベントをトリガーし、検証効果を実現できます。入力にエラーがある場合は、ユーザーに赤色で通知されます。名前と電子メール アドレスがルールに準拠していない場合は、2 つのエラーがあります。つまり、クラス「onError」を持つ要素が 2 つあります。クラス「onError」の要素の長さを判断して、送信できるかどうかを判断できます。長さが 0、つまり true の場合、送信できることを意味します。長さが 0 より大きい、つまり false の場合、エラーが発生し、フォームの送信を禁止する必要があることを意味します。フォームの送信を防ぐには、「return false」ステートメントを直接使用できます。
上記の分析によると、送信イベントには次の jQuery コードを記述することができます。
//点击重置按钮时，触发文本框的失去焦点事件
$("#send").click(function(){
//trigger 事件执行完后，浏览器会为submit按钮获得焦点
$("form .required:input").trigger("blur");
var numError = $("form .onError").length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱");
});その表示効果を図 5 に示します。
图 5 正确提交
用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒是否正确？如果输入时就可以提醒，这样就可以更加即时了。
为了达到用户提出的需求，需要给表单元素绑定 keyup 事件和 focus 事件，keyup 事件能在用户每次松开按键时触发，实现即时提醒；focus 事件能在元素得到焦点的时候触发，也可以实现即时提醒。
代码如下：
$("form :input").blur(function(){
//失去焦点处理函数
//代码省略...
}).keyup(function(){
//triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});这样当用户将光标定位到文本框上和改变文本框的值时，表单就会即时提醒用户填写是否正确，从而符合了用户的需求。
在前面的章节已经提过，trigger（“blur”）不仅会触发为元素绑定的blur事件，也会触发浏览器默认的 blur 事件，即不能讲光标定位到文本框上。而 triggerHandler（“blur”）只会触发为元素绑定的 blur 事件，而不触发浏览器默认的 blur 事件。
至此，表单验证过程就全部完成。读者可以根据自己的实际需求修改验证规则。
注：客户端的验证仅用于提升用户的操作体验，而服务器仍需对用户输入的数据的合法性进行校验。对于禁用了脚本的用户和用户自制的网页提交操作，必须在服务器端验证。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQueryStudy</title>
<style type="text/css">
.int{ height: 30px; text-align: left; width: 600px; }
label{ width: 200px; margin-left: 20px; }
.high{ color: red; }
.msg{ font-size: 13px; }
.onError{ color: red; }
.onSuccess{ color: green; }
</style>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
</head>
<body>
<form method="post" action="">
<p class="int">
<label for="name">名称：</label>
<input type="text" id="name" class="required" />
</p>
<p class="int">
<label for="email">邮箱：</label>
<input type="text" id="email" class="required" />
</p>
<p class="int">
<label for="address">地址：</label>
<input type="text" id="personinfo" />
</p>
<p class="int">
<input type="submit" value="提交" id="send" style="margin-left: 70px;" />
<input type="reset" value="重置" id="res" />
</p>
</form>
<script type="text/javascript">
$(document).ready(function(){
//为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
$("form :input.required").each(function(){
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单的必填文本框添加相关事件（blur、focus、keyup）
$("form :input").blur(function(){
//注意：这里的this是DOM对象，$(this)才是jQuery对象
var $parent = $(this).parent();
//删除之前的错误提醒信息
$parent.find(".msg").remove();
//验证“名称”
if($(this).is("#name")){
//运用jQuery中的$.trim()方法，去掉首位空格
if($.trim(this.value) == "" || $.trim(this.value).length < 6){
var errorMsg = " 请输入至少6位的名称！";
//class='msg onError' 中间的空格是层叠样式的格式
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if($.trim(this.value) == "" || ($.trim(this.value) != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
var errorMsg = "请输入正确的E-Mail地址！";
$parent.append("<span class='msg onError'>" + errorMsg + "</span>");
}
else{
var okMsg=" 输入正确";
$parent.find(".high").remove();
$parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
}
}
}).keyup(function(){
//triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
//点击重置按钮时，触发文本框的失去焦点事件
$("#send").click(function(){
//trigger 事件执行完后，浏览器会为submit按钮获得焦点
$("form .required:input").trigger("blur");
var numError = $("form .onError").length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱");
});
});
</script>
</body>
</html>jQuery 官方 API： http://api.jquery.com/
以上就是jQuery 实现表单验证功能的全部内容，希望对大家有所帮助，更多相关教程请访问jQuery视频教程！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1665
14
1424
52
1322
25
1270
29
1249
24
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
徹底した分析: jQuery の長所と短所
Feb 27, 2024 pm 05:18 PM
jQuery は、フロントエンド開発で広く使用されている高速、小型、機能豊富な JavaScript ライブラリです。 2006 年のリリース以来、jQuery は多くの開発者にとって最適なツールの 1 つとなっていますが、実際のアプリケーションでは、いくつかの利点と欠点もあります。この記事では、jQuery の長所と短所を詳しく分析し、具体的なコード例で説明します。利点: 1. 簡潔な構文 jQuery の構文設計は簡潔かつ明確であるため、コードの読みやすさと記述効率が大幅に向上します。例えば、
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
jQueryを使用してテーブルに新しい行を追加する方法の紹介
Feb 29, 2024 am 08:12 AM
jQuery は、Web 開発で広く使用されている人気の JavaScript ライブラリです。 Web 開発中は、JavaScript を使用してテーブルに新しい行を動的に追加することが必要になることがよくあります。この記事では、jQuery を使用してテーブルに新しい行を追加する方法を紹介し、具体的なコード例を示します。まず、jQuery ライブラリを HTML ページに導入する必要があります。 jQuery ライブラリは、次のコードを通じてタグに導入できます。
