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

JavaScriptで桁数チェックをする方法を学ぶイメージJS
この記事は約8分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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桁であることをチェックしています。

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

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

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

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

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

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

○サンプルコード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つの引数を受け取り、入力値の桁数が指定された範囲内であるかどうかを判定しています。

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

まとめ

この記事では、JavaScriptで桁数チェックを行う方法について詳しく解説しました。

サンプルコードを使って、簡単な桁数チェックから動的な桁数チェック、さらには任意の桁数チェックに対応した汎用的な関数まで、幅広いシーンで活用できる方法を紹介しました。

注意点やカスタマイズ方法も解説しましたので、ぜひ実際の開発で活用してみてください。