dw は JavaScript フォーム検証を実装します

フロントエンド開発では、フォーム検証は非常に重要な部分です。ユーザーが入力したデータが要件を満たしていることが保証され、より良いユーザー エクスペリエンスが提供されます。 JavaScript は、フォーム検証の実装に使用できる、非常に人気のある強力なプログラミング言語です。この記事では、dw（Dreamweaver）を使ってJavaScriptのフォームバリデーションを実装する方法を紹介します。

dw は、優れた HTML エディターおよび Web サイト開発ツールであり、開発者が Web サイトをより効率的に作成および管理できるようにする豊富なビジュアル ツールとコード エディターを備えています。 dw は、JavaScript コード プロンプトと構文チェック機能も提供し、JavaScript コードをより簡単かつ迅速に作成できるようにします。

始める前に、フォームを用意する必要があります。 dw でフォームを作成するのは非常に簡単で、フォーム コントロール パネルを使用するだけです。 dwのメニューバーから「ウィンドウ」→「コントロール」を選択し、フォームコントロールパネルを開きます。パネルで必要なフォーム コントロールを選択し、ページの中央にドラッグします。この記事では、フォーム検証を実装する例として、単純なログイン フォームを使用します。

コードの実装は次のとおりです:

1. 電子メール検証の実装

ログイン フォームに、ユーザーは自分の電子メール アドレスを入力する必要があります。そのため、検証のためにユーザーの入力電子メールを確認する必要があります。

まず、JavaScript で動作する電子メール入力ボックスの ID を定義する必要があります。 dw では、プロパティ パネルでフォーム コントロールの ID を設定できます。この例では、電子メール入力ボックスの ID を「email」に設定します。

次に、電子メール検証を実行するための関数を JavaScript コードで定義する必要があります。コードは次のように実装されます。

function validateEmail() {
  var email = document.getElementById("email").value;
  var emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;

  if (!emailPattern.test(email)) {
    alert("请输入有效的邮箱地址！");
    return false;
  }

  return true;
}

まず、ユーザーが入力した電子メール アドレスを保存する変数「email」を定義します。次に、電子メール アドレスと一致する正規表現を定義しました。この正規表現は、最も一般的な電子メール アドレス形式に一致します。

次に、test() メソッドを使用して、ユーザーが入力したメール アドレスが正規表現と一致するかどうかを確認します。一致しない場合は、警告ボックスがポップアップ表示され、有効なアドレスを入力して false を返すように求められます。それ以外の場合は true を返します。

最後に、ユーザーがいつ送信ボタンをクリックしたかを検証するために、関数をフォームの送信イベントにバインドする必要があります。 dw では、プロパティ パネルでフォーム コントロールの送信イベントを設定できます。

コードは次のように実装されます。

<form onsubmit="return validateEmail()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

form 要素で onsubmit イベントを定義し、定義したばかりの検証関数にバインドします。ユーザーが送信ボタンをクリックすると、フォームはデータを自動的に検証して送信します。

2. パスワード検証の実装

ログイン フォームでは、ユーザーは自分のパスワードを入力する必要があるため、ユーザーが入力したパスワードも検証する必要があります。

パスワード検証要件には、通常、パスワードの長さの制限、パスワードの複雑さの制限などが含まれます。この記事では、パスワードの長さのみを制限します。パスワードの長さは 6 ～ 20 文字である必要があります。

まず、JavaScript で動作するパスワード入力ボックスの ID を定義する必要があります。 dw では、プロパティ パネルでフォーム コントロールの ID を設定できます。この例では、パスワード入力ボックスの ID を「password」に設定します。

次に、JavaScript コードでパスワード検証用の関数を定義する必要があります。コードは次のように実装されます。

function validatePassword() {
  var password = document.getElementById("password").value;

  if (password.length < 6 || password.length > 20) {
    alert("密码长度必须在6到20个字符之间！");
    return false;
  }

  return true;
}

まず、ユーザーが入力したパスワードを保存する変数「password」を定義します。次に、パスワードの長さが 6 ～ 20 文字であるかどうかを判断します。一致しない場合は、警告ボックスがポップアップ表示され、有効なパスワードを入力して false を返すように求められます。それ以外の場合は true を返します。

最後に、ユーザーがいつ送信ボタンをクリックしたかを検証するために、関数をフォームの送信イベントにバインドする必要があります。 dw では、プロパティ パネルでフォーム コントロールの送信イベントを設定できます。

コードは次のように実装されます。

<form onsubmit="return validateEmail() && validatePassword()">
  // 表单控件
  <input type="email" id="email" name="email" required>
  <input type="password" id="password" name="password" required>
  
  // 提交按钮
  <input type="submit" value="提交">
</form>

form 要素で onsubmit イベントを定義し、定義したばかりの検証関数にバインドします。ここでは、「&&」演算子を使用して電子メール検証機能とパスワード検証機能を組み合わせます。データの送信は、両方の関数の戻り値が true の場合にのみ許可されます。

この時点で、dw での JavaScript フォーム検証の実装プロセスは終了しました。ユーザーが入力したデータが要件を満たしていない場合、警告ボックスがポップアップ表示され、ユーザーにプロンプ​​トが表示され、フォームの送信が妨げられます。このようにして、ユーザーのデータ セキュリティをより適切に保護し、より良いユーザー エクスペリエンスを提供できます。

以上がdw は JavaScript フォーム検証を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。