JavaScriptを使用して確認する方法

Web 開発では、フォームは非常に一般的な要素です。ただし、ユーザーがフォームに入力したデータは正しいことが保証されていないことが多いため、データの有効性を確認するために何らかの検証を実行する必要があります。 Web フロントエンド開発の重要な要素である JavaScript には非常に強力な検証機能が備わっており、この記事では JavaScript を使用してフォーム データを検証する方法を紹介します。

1. フォームデータの取得

フォームデータを検証するには、まず入力データを取得する必要があります。 JavaScript では、以下に示すように、ドキュメント オブジェクトを使用してフォーム要素を取得できます。

let username = document.getElementById('username').value; // 获取用户名的值
let password = document.getElementById('password').value; // 获取密码的值

このうち、getElementById() メソッドは、要素の id 属性に基づいて、対応する要素を取得できます。フォーム要素の値を取得したら、これらの値を検証できます。

2. ユーザー名の確認

ユーザー名を確認するときは、正規表現を使用できます。以下は、6 ～ 20 文字の大文字、小文字、数字、アンダースコアを照合できる単純な正規表現です。

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/;

次に、取得したユーザー名を正規表現と照合して、次のいずれかを判断します。要件を満たしています:

if (!usernamePattern.test(username)) {
  // 满足条件
} else {
  // 不满足条件
}

上記のコードでは、test() メソッドは文字列が特定の正規表現に一致するかどうかをテストできます。一致する場合は true を返し、一致しない場合は false を返します。 。

3. パスワードの確認

パスワードを確認するときに正規表現を使用することもできます。以下は、6 ～ 20 文字の長さの大文字、小文字、数字、特殊文字と一致する単純な正規表現です。

let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/;

次に、取得したパスワードを正規表現と照合して、次のいずれかを判断します。

if (!passwordPattern.test(password)) {
  // 满足条件
} else {
  // 不满足条件
}

同様に、上記のコードでは、test() メソッドは文字列が特定の正規表現に一致するかどうかをテストできます。一致する場合は true を返し、一致しない場合は true を返します。 falseを返します。

4. メール アドレスの確認

メール アドレスは非常に一般的なフォーム要素であるため、メール アドレスを確認することも非常に必要です。同様に、正規表現を検証に使用できます。以下は、合法的な電子メール アドレスと一致する簡単な正規表現です:

let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/;

次に、取得した電子メール アドレスを正規表現と照合して、要件を満たしているかどうかを判断できます:

if (!emailPattern.test(email)) {
  // 满足条件
} else {
  // 不满足条件
}

同様に、上記のコードでは、test() メソッドで文字列が特定の正規表現に一致するかどうかをテストでき、一致する場合は true を返し、一致しない場合は false を返します。

5. 携帯電話番号の検証

携帯電話番号を検証する場合、正規表現を使用することもできます。以下は、法的な携帯電話番号と照合できる簡単な正規表現です:

let phonePattern = /^1[34578]d{9}$/;

次に、取得した携帯電話番号を正規表現と照合して、要件を満たしているかどうかを判断します:

if (!phonePattern.test(phone)) {
  // 满足条件
} else {
  // 不满足条件
}

同様に、上記のコードの test() メソッドは、文字列が特定の正規表現に一致するかどうかをテストでき、一致する場合は true を返し、一致しない場合は false を返します。

6. 検証機能の実装

上記の検証ルールを統合することで、完全なフォーム検証機能を実装できます。以下は簡単なサンプル コードです。

let usernamePattern = /^[a-zA-Z0-9_]{6,20}$/; // 校验用户名
let passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{6,20}$/; // 校验密码
let emailPattern = /^[a-zA-Z0-9]+([._]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([.][a-zA-Z0-9]+)+$/; // 校验邮箱地址
let phonePattern = /^1[34578]d{9}$/; // 校验手机号码

function validateForm() { // 表单校验函数
  let username = document.getElementById('username').value; // 获取用户名
  let password = document.getElementById('password').value; // 获取密码
  let email = document.getElementById('email').value; // 获取邮箱地址
  let phone = document.getElementById('phone').value; // 获取手机号码

  if (!usernamePattern.test(username)) { // 校验用户名
    alert('请填写6到20位大小写字母、数字和下划线');
    return false;
  } else if (!passwordPattern.test(password)) { // 校验密码
    alert('请填写6到20位大小写字母、数字、特殊字符');
    return false;
  } else if (!emailPattern.test(email)) { // 校验邮箱地址
    alert('请填写正确的邮箱地址');
    return false;
  } else if (!phonePattern.test(phone)) { // 校验手机号码
    alert('请填写正确的手机号码');
    return false;
  } else {
    return true;
  }
}

上記のコードでは、フォームが送信されると、validateForm() 関数が自動的に呼び出され、フォーム内のデータが検証されます。検証が失敗した場合、関数は false を返してフォームの送信を防ぎます。検証に合格した場合、関数は true を返し、フォームは送信されます。同時に、検証が失敗した場合は、ユーザーが修正しやすいように、対応するプロンプト メッセージがポップアップ表示されます。

7. 概要

非常に重要な Web フロントエンド開発言語として、JavaScript は非常に強力な検証機能を提供します。フォーム開発では、データ検証に JavaScript を使用すると、データの有効性と正確性が大幅に保証され、ユーザー エクスペリエンスとデータ セキュリティが向上します。上記では、一般的に使用される検証ルールとコード実装をいくつか紹介していますので、参考にしてください。

以上がJavaScriptを使用して確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。