JavaScriptで桁数チェック！3ステップで完璧に理解

はじめに
●JavaScriptで桁数チェックとは
- ○桁数チェックの基本
●JavaScriptでの桁数チェックの作り方
- ○サンプルコード1：基本的な桁数チェック
- ○サンプルコード2：正規表現を使った桁数チェック
●JavaScriptでの桁数チェックの使い方
- ○サンプルコード3：入力フォームでの桁数チェック
- ○サンプルコード4：動的に桁数チェックを行う
●桁数チェックの注意点と対処法
●桁数チェックのカスタマイズ方法
- ○サンプルコード5：任意の桁数チェックに対応した関数
まとめ

はじめに

この記事を読めば、JavaScriptでの桁数チェックをすることができるようになります。

JavaScript初心者でも分かりやすいように、基本的な知識から応用例まで詳しく解説しています。

さらに、使い方や対処法、注意点、カスタマイズ方法もご紹介します。

●JavaScriptで桁数チェックとは

JavaScriptでの桁数チェックとは、入力されたデータの桁数が正しいかどうかを確認する処理です。

例えば、電話番号やクレジットカード番号の入力チェックを行う際に、桁数チェックが役立ちます。

正しい桁数で入力されていることを確認することで、誤った入力を防ぎ、データの整合性を保つことができます。

○桁数チェックの基本

JavaScriptで桁数チェックを行うには、文字列の長さを取得して比較する方法や、正規表現を使った方法があります。

どちらの方法でも、入力されたデータの桁数が正しいかどうかを判断できます。

●JavaScriptでの桁数チェックの作り方

ここでは、基本的な桁数チェックの方法と、正規表現を使った方法を紹介します。

○サンプルコード1：基本的な桁数チェック

下記のサンプルコードでは、文字列の長さを取得して、指定された桁数と比較しています。

function checkLength(input, minLength, maxLength) {
  const length = input.length;
  if (length >= minLength && length <= maxLength) {
    return true;
  } else {
    return false;
  }
}

const input = "123456";
const result = checkLength(input, 6, 8);
console.log(result); // true

○サンプルコード2：正規表現を使った桁数チェック

下記のサンプルコードでは、正規表現を使って指定された桁数の範囲内であるかどうかをチェックしています。

function checkLengthWithRegex(input, minLength, maxLength) {
  const regex = new RegExp(`^.{${minLength},${maxLength}}$`);
  return regex.test(input);
}

const input = "123456";
const result = checkLengthWithRegex(input, 6, 8);
console.log(result); // true

●JavaScriptでの桁数チェックの使い方

ここでは、入力フォームでの桁数チェックと、動的に桁数チェックを行う方法を紹介します。

○サンプルコード3：入力フォームでの桁数チェック

下記のサンプルコードでは、HTMLの入力フォームで入力されたデータの桁数チェックを行っています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入力フォームでの桁数チェック</title>
</head>
<body>
  <form id="myForm">
    <label for="inputField">電話番号（10～11桁）：</label>
    <input type="text" id="inputField" />
    <button type="button" onclick="validateInput()">チェック</button>
  </form>

  <script>
    function validateInput() {
      const inputField = document.getElementById("inputField");
      const inputValue = inputField.value;

      if (inputValue.length >= 10 && inputValue.length <= 11) {
        alert("正しい桁数です。");
      } else {
        alert("桁数が不正です。");
      }
    }
  </script>
</body>
</html>

このコードでは、入力フォームに入力された電話番号の桁数が10桁か11桁であることをチェックしています。

正しい桁数であれば「正しい桁数です。」というメッセージが表示され、不正な桁数であれば「桁数が不正です。」というメッセージが表示されます。

○サンプルコード4：動的に桁数チェックを行う

下記のサンプルコードでは、入力フォームで入力されるたびに、動的に桁数チェックを行っています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動的に桁数チェックを行う</title>
</head>
<body>
  <form>
    <label for="inputField">電話番号（10～11桁）：</label>
    <input type="text" id="inputField" oninput="validateInput()" />
    <p id="message"></p>
  </form>

  <script>
    function validateInput() {
      const inputField = document.getElementById("inputField");
      const inputValue = inputField.value;
      const messageElement = document.getElementById("message");

      if (inputValue.length >= 10 && inputValue.length <= 11) {
        messageElement.textContent = "正しい桁数です。";
      } else {
        messageElement.textContent = "桁数が不正です。";
      }
    }
  </script>
</body>
</html>

このコードでは、入力フォームに入力されるたびに、電話番号の桁数が10桁か11桁であることをチェックしています。

●桁数チェックの注意点と対処法

桁数チェックを行う際には、いくつかの注意点があります。

文字列の長さを取得する際、全角文字や特殊文字が含まれている場合、意図しない結果が得られることがあります。
そのため、文字列の長さを取得する前に、全角文字を半角文字に変換したり、特殊文字を取り除く処理を行うことが望ましいです。
桁数チェックだけでは、入力内容が正しいかどうかを完全に確認できません。
例えば、電話番号の場合、数字以外の文字が含まれていると不正な入力ですが、桁数チェックだけではそのようなケースを検出できません。
そのため、桁数チェックと併せて、他のバリデーションも行うことが重要です。

●桁数チェックのカスタマイズ方法

ここでは、桁数チェックをカスタマイズする方法を紹介します。

○サンプルコード5：任意の桁数チェックに対応した関数

下記のサンプルコードでは、引数で指定した桁数の範囲で入力値をチェックする汎用的な関数を作成しています。

function isValidLength(input, minLength, maxLength) {
  const inputLength = input.length;
  return inputLength >= minLength && inputLength <= maxLength;
}

// 使用例
const phoneNumber = "09012345678";
console.log(isValidLength(phoneNumber, 10, 11)); // true

const password = "password1234";
console.log(isValidLength(password, 8, 16)); // true

この関数では、入力値（input）、最小桁数（minLength）、最大桁数（maxLength）の3つの引数を受け取り、入力値の桁数が指定された範囲内であるかどうかを判定しています。

この関数を利用すれば、電話番号やパスワードなど、さまざまなシーンで桁数チェックを行うことができます。