dw は JavaScript フォーム検証を実装します-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-17 20:28:36

オリジナル

977 人が閲覧しました

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

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

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

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

電子メール検証の実装

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

まず、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 イベントを定義し、定義したばかりの検証関数にバインドします。ユーザーが送信ボタンをクリックすると、フォームはデータを自動的に検証して送信します。

パスワード検証の実装

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

パスワード検証要件には、通常、パスワードの長さの制限、パスワードの複雑さの制限などが含まれます。この記事では、パスワードの長さのみを制限します。パスワードの長さは 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 を返します。

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

<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 サイトの他の関連記事を参照してください。