JavaScriptを使用してクライアント側のフォーム検証を実装する方法

JavaScriptを使用してクライアント側のフォーム検証を実装する方法

JavaScriptは、今日から始めることができる最も人気があり、用途の広いプログラミング言語の1つです。このプログラミング言語は当然のことながらWebの言語であり、Webサイトに双方向性を追加するために不可欠です。





form要素は、Webサイトで最も使用されているHTML要素の1つです。これらのフォームは、ユーザーからの入力を受け取り、ブラウザーまたはサーバーで処理します。ただし、セキュリティの問題や不要なバグに対処するには、これらの入力を検証することが重要です。



DOM操作を理解する

JavaScriptを使用したクライアント側のフォーム検証の実装に進む前に、一般に「DOM」として知られているドキュメントオブジェクトモデルを理解することが不可欠です。 DOMは、JavaScriptがHTMLWebページ上の要素と対話できるようにする標準化されたAPIです。





詳細：ウェブサイトの隠されたヒーロー：DOMを理解する

イベントリスナーを追加してユーザー入力を取得するには、DOM操作の基本を理解する必要があります。 DOMAPIとJavaScriptを使用してWebページのコンテンツを変更する方法を説明する例を次に示します。









Document





const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';

上記のコードでは、

タグのIDは 段落 。 JavaScriptコードを記述しているときに、を呼び出すことでこの要素にアクセスできます。 document.getElementById（ 'paragraph'） メソッドとその値の操作。

DOM操作の基本を理解したので、先に進んでフォーム検証を実装しましょう。



JavaScriptを使用したフォーム検証

ユーザーから取得できる入力にはさまざまな種類があります。テキストタイプ、電子メールタイプ、パスワードタイプ、ラジオボタン、およびチェックボックスは、遭遇する可能性のある最も一般的なものの一部です。これらの大多数の入力タイプのため、それぞれを検証するために異なるロジックを使用する必要があります。

検証について詳しく説明する前に、HTMLフォームとその重要性を理解しましょう。 HTMLフォームは、データの入力、変更の適用、ポップアップの呼び出し、サーバーへの情報の送信などを可能にするため、Webサイトを操作するための主要な方法の1つです。



テキストでtbhはどういう意味ですか

HTML elementは、これらのユーザー向けフォームを作成するために使用されます。 HTMLフォームの入力を検証する方法は次のとおりです。

1.電子メールの検証

認証システムを構築している場合でも、ニュースレターのユーザーメールを収集している場合でも、データベースに保存したり処理したりする前に、メールを検証することが重要です。メールが必要な条件をすべて満たしているかどうかを確認するには、 正規表現 。

HTML：

JavaScript：

const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}

2.パスワードの検証

パスワードは重要なデータであり、セキュリティを確保するために特別な種類の検証が必要です。パスワードフィールドと確認パスワードフィールドの2つのフィールドがあるサインアップフォームについて考えてみます。これらの入力のペアを検証するには、次のことを考慮する必要があります。

  • パスワードは6文字以上である必要があります。
  • パスワードの値とパスワードの確認フィールドは同じである必要があります。

HTML：


JavaScript：

const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}

3.ラジオ入力の検証

HTMLラジオ入力は、ユーザーが相互に排他的なオプションの事前定義されたセットの1つだけを選択できるようにする特別なタイプのグラフィカル制御要素です。このような入力の一般的な使用例は、性別を選択することです。このような入力を検証するには、少なくとも1つが選択されているかどうかを確認する必要があります。

これは、 論理演算子 AND（ && ）およびNOT（ ！ ）この方法での演算子：

HTML：

Male

Female

Others

JavaScript：

const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!');

4.入力検証を選択します

NS HTML要素は、ドロップダウンリストを作成するために使用されます。 NS 内部のタグ 要素は、ドロップダウンリストで使用可能なオプションを定義します。それぞれの タグには、値属性が関連付けられています。

携帯電話にメールを送る

デフォルトまたは初期オプションの場合、値を空の文字列に設定して、無効なオプションと見なすことができます。他のすべてのオプションについては、適切な値属性を設定します。これは、検証する方法の例です。 入力要素：

HTML：


Select One
Mr
Mrs
Ms

JavaScript：

Windows10に表示されないデュアルブートオプション
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}

5.チェックボックスの検証

タイプチェックボックスの入力要素は、デフォルトで、アクティブ化されたときにチェックまたはチェックされるボックスとしてレンダリングされます。チェックボックスを使用すると、フォームに送信する単一の値を選択できます。チェックボックスは、「契約条件に同意する」入力の一般的な選択肢です。

チェックボックスがオンになっているかどうかを確認するには、チェックボックス入力のチェック済み属性にアクセスします。次に例を示します。

HTML：


I agree to the terms and conditions

JavaScript：

const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}

治療よりも予防​​が大切です

安全で安心な体験を提供するために、訪問者から受け取ったすべての入力を検証することを常にお勧めします。ハッカーは常に、クロスサイトスクリプティング攻撃とSQLインジェクションを実行するために、悪意のあるデータを入力フィールドに入力しようとしています。

HTML入力を検証する方法を理解したので、フォームを作成して上記の戦略を実装してみてはいかがでしょうか。

共有 共有 つぶやき Eメール HTMLでフォームを作成する方法

ユーザーがHTMLフォームを使用してWebサイトにデータを入力できるようにします。

次を読む 関連トピック
  • プログラミング
  • HTML
  • JavaScript
  • ウェブ開発
  • コーディングチュートリアル
著者について Nitin Ranganath（31の記事が公開されました）

Nitinは、熱心なソフトウェア開発者であり、JavaScriptテクノロジーを使用してWebアプリケーションを開発するコンピューターエンジニアリングの学生です。彼はフリーランスのWeb開発者として働いており、自由な時間にLinuxとプログラミングのために書くのが好きです。

NitinRanganathのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください