JavaScript 関数フォームの検証: ユーザー入力の有効性を確認します。

JavaScript 関数フォームの検証: ユーザー入力の有効性の確保

ユーザーが Web フォームにデータを入力するときは、これらの入力データの有効性を確認して、優れたユーザーエクスペリエンスとデータセキュリティ。 JavaScript 関数のフォーム検証は、ユーザーが入力したデータが要件を満たしているかどうかを検証するために使用できる一般的な方法です。次に、一般的なフォーム検証方法をいくつか取り上げ、具体的なコード例を示します。

1. 非 null 検証

非 null 検証は、最も基本的なフォーム検証関数です。フォームを送信する前に、ユーザーが必須の入力ボックスに値を入力していることを確認する必要があります。以下は、単純な null 以外の検証関数です:

function validateRequired(input){
  if(input.value == ""){
    input.classList.add("error"); // 添加错误样式
    return false;
  } else {
    input.classList.remove("error"); // 移除错误样式
    return true;
  }
}

HTML では、onsubmit イベントを使用して検証をトリガーできます:

<form onsubmit="return validateForm()">
  <input type="text" id="name" required>
  <button type="submit">提交</button>
</form>

2. 電子メール検証

電子メール検証は、一般的なフォーム検証機能の 1 つです。正規表現を使用して、ユーザーが入力した電子メール アドレスが仕様を満たしているかどうかを確認できます:

function validateEmail(input){
  var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/; // 邮箱正则表达式
  if(!emailRegex.test(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML で使用:

<form onsubmit="return validateForm()">
  <input type="email" id="email" required>
  <button type="submit">提交</button>
</form>

3. パスワード検証

パスワードの検証は、ユーザー アカウントのセキュリティを確保するための重要な部分です。大文字、小文字、数字を含むパスワードの長さを確認することで、パスワードの強度を判断できます。

function validatePassword(input){
  var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)[a-zA-Zd]{8,}$/; // 密码正则表达式（至少8个字符，包含大小写字母和数字）
  if(!passwordRegex.test(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML での使用法:

<form onsubmit="return validateForm()">
  <input type="password" id="password" required>
  <button type="submit">提交</button>
</form>

4. 数値検証

ユーザー入力が数値であるかどうかを確認する必要がある場合があります。組み込みの

isNaN() 関数を検証に使用できます:

function validateNumber(input){
  if(isNaN(input.value)){
    input.classList.add("error");
    return false;
  } else {
    input.classList.remove("error");
    return true;
  }
}

HTML での使用:

<form onsubmit="return validateForm()">
  <input type="number" id="age" required>
  <button type="submit">提交</button>
</form>

上記はいくつかの一般的なフォーム検証方法であり、使用できます。実際に応じてそれらを結合し、必要に応じて拡張します。 JavaScript 関数のフォーム検証を通じて、ユーザーが入力したデータの正当性を保証し、ユーザー エクスペリエンスとデータ セキュリティを向上させることができます。

以上がJavaScript 関数フォームの検証: ユーザー入力の有効性を確認します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。