Luhnアルゴリズムを統合してクレジットカード番号フォームの確認を実現します

この記事は、HTML5およびJavaScriptベースのフォーム検証システムでリアルタイムでクレジットカード番号を検証するためにLuhnアルゴリズムを統合する方法を開発者にガイドすることを目的としています。この記事では、入力フィールドを正しく取得し、Luhnアルゴリズムロジックを適用し、Setcustomvalidity APIを介してカスタム検証ステータスとエラープロンプトを管理し、フォーム提出前にすべてのフィールドの有効性を確保し、ユーザーエクスペリエンスを改善する方法を詳細に説明します。

1.フォーム検証をLuhnアルゴリズムと統合することの課題を理解する

最新のWebフォームは通常、HTML5ビルトイン検証メカニズム（必要な、Type = "Email"など）を使用して、基本的なユーザー入力検証を提供します。ただし、クレジットカード番号のLuhnアルゴリズムの検証など、特定のビジネスロジックの検証には、JavaScriptを使用してカスタマイズする必要があります。コアチャレンジは、このカスタム検証ロジックを既存のHTML5検証プロセスにシームレスに組み込み、クレジットカード番号がLuhnアルゴリズムに準拠していない場合、エラープロンプトを正しく表示し、他の無効なフィールドのようなフォーム提出を防ぐことができることを確認する方法です。

Luhnアルゴリズム（Modulo 10アルゴリズムとも呼ばれます）は、クレジットカード番号、IMEI番号などのさまざまな識別番号を検証するためによく使用される単純なチェックサムアルゴリズムです。特定の計算ルールを使用して、数値の文字列が有効な数字であるかどうかを判断しますが、信頼性または存在を確認できません。

2。LuhnアルゴリズムのJavaScript実装

まず、Luhnアルゴリズムを実装するには、独立したJavaScript関数が必要です。この関数は、文字列を入力（通常はクレジットカード番号）として使用し、数値がLuhnチェックに合格するかどうかを示すブール値を返します。

 /**
 *指定された文字列がLuhnアルゴリズムのルールに準拠していることを確認します* @param {string} value -string in videfified（通常はクレジットカード番号）
 * @returns {boolean}  -  luhnアルゴリズムがコンプライアンスにある場合はtrueを返し、それ以外の場合はfalseを返します
 */
関数checkluhn（value）{
  // 1。すべての非番号、非空間、非空間文字を削除します。他の非数字の文字が存在する場合、それらは直接無効と見なされます。
  if（ /[^0-9- \ s] /.test(value））false;

  // 2。すべての非数字を削除し、Luhn Algorithmの数値のみを削除し、value.Replace（/\ d/g、 ""）;

  ncheck = 0とします。 // checksum let beven = false; //マークが均一な数字であるかどうか（右から左へ、最初の数字は奇妙な数字です）

  //3。右から左に数値を繰り返します（let n = value.length-1; n> = 0; n-）{
    cdigit = value.charat（n）;
    ndigit = parseint（cdigit、10）;

    // 4。均等な数字を2倍にします。9を超える場合、9は減算されます
    if（beven）{
      if（（ndigit *= 2）> 9）{
        ndigit- = 9;
      }
    }

    //5。Checksumncheck= ndigitに蓄積します。
    beven =！beven; //パリティマークを切り替える}

  // 6。チェックサムが10で割り切れることができる場合、luhnアルゴリズム（ncheck％10）=== 0を介して（ncheck％10）を返します。
}

Luhnアルゴリズムの原則の簡単な説明：

1. 数字の右端から始めて、それを最初の（奇数）として扱います。
2. 右から左に、他のすべての数字の数に2を掛けます（つまり、すべての数字の数）。
3. 2を掛けた結果が2桁の数（つまり、9を超える）である場合、この2桁の2つの数字を追加します（たとえば、12は1 2 = 3になります）。
4. すべて（不度の奇数で処理された均一）番号を追加して、合計を取得します。
5. この合計が10で割り切れる可能性がある場合、数はLuhnチェックに合格します。

3。Luhnアルゴリズムをフォーム検証プロセスに統合します

Luhnアルゴリズムを既存のフォームのHTML5検証プロセスに統合するには、クレジットカード入力フィールドの入力イベントを聞き、入力するたびにLuhn検証を実行する必要があります。重要なのは、フィールドの検証ステータスとカスタムエラーメッセージを制御するために、htmlelement.setcustomvalidity（）メソッドを使用することです。

3.1 JavaScriptコア統合ロジック

フォーム初期化スクリプトで、クレジットカード入力フィールドを聞いてイベントを追加します。

 （関数 （） {
  「Strictを使用」;

  // ...既存のフォーム検証ロジック...

  //クレジットカード入力フィールドの入力イベントを聞く
    //1。クレジットカード入力フィールドのDOM要素を取得する//ここのセレクターが入力要素を正確に取得できることを確認してください。
    //この場合、HTML構造は<div id="cardcontainer"> <input id="cc" ...> </div>です
    // document.queryselector（ '＃cardcontainer input'）またはより多くの直接document.getElementById（ 'cc'）を使用できます。
    const field = document.getElementById（ 'cc'）; //またはdocument.queryselector（ '＃cardContainer input'）;

    // 2。luhnアルゴリズムを実行するかどうかを確認します
      //検証が渡された場合は、カスタム検証メッセージをクリアし、フィールドを有効な状態フィールドにします。
    } それ以外 {
      //検証が失敗した場合、カスタム検証メッセージを設定して、フィールドにフィールドを無効にするように設定します。SetCustomValisit（ "Invalid field。"）; //このメッセージは、ブラウザのデフォルトエラープロンプトに表示されます}
  }）;

  // ...既存のLuhnアルゴリズム関数Checkluhn ...

}）（）;

キーポイント説明：

• フィールド変数の正しい取得：元のコードのフィールド変数は未定義であり、セットカスタムバリティが呼び出されます。実際のDOM要素は、最初にdocument.getElementById（ 'cc'）またはdocument.queryselector（ '＃cardcontainer input'）などを介して取得する必要があります。
• setcustomvalidity（ ""） ：フィールドがカスタム検証を渡す場合、setcustomvalidity（ ""）を呼び出し、空の文字列を渡す必要があります。空でない文字列が渡されると、フィールドは無効として扱われ、文字列はエラーメッセージとして表示されます。
• 入力イベント：変更イベントの代わりに入力イベントを選択すると、リアルタイムのフィードバックを達成し、ユーザーエクスペリエンスを向上させることができます。

3.2 HTML構造調整

setcustomalidityによって設定されたエラーメッセージを正しく表示し、既存のCSSスタイルと組み合わせて動作させることができるようにするには、HTML構造にエラーメッセージを表示するための要素が含まれ、CSSスタイルがフィールドの検証ステータスに応答できることを確認する必要があります。

クレジットカード入力フィールドのHTML部分で、ID属性を含めて、空のフィードバックと無効なフィードバックを備えたDIVを持っていることを確認してください。

 <div class="flex mb-6 space-x-4">
  <div id="cardcontainer" class="w-full md：w-1/2">
    <label for="cc" class="ブロックMB-2 Text-SM Text-Gray-600 Dark：Text-Gray-400">クレジットカード番号</label>
    <input type="text" id="cc" placeholder="xxxxx xxxxx xxxxx" class="wfull px-3 py-2プレースホルダー - グレイ300ボーダー2ボーダー200ラウンドMDフォーカス：アウトラインノンフォーカス：リングフォーカス：リングインディゴ-100フォーカス：ボーダーインディゴ-300">>

    <div class="空のフィードバックText-Red-400 Text-SM MT-1">
      クレジットカード番号を提供してください。
    </div>
    <div class="無効なフィードバックText-Red-400 Text-SM MT-1">
      有効なクレジットカード番号を提供してください。
    </div>
  </div>
</div>

これは、クレジットカード入力フィールドの親コンテナに追加されたID = "CardContainer"です。 document.getElementByID（ 'cc'）の場合は必要ありませんが、セレクターがdocument.queryselector（ '＃cardcontainer input'）の場合、このIDは必要です。

3.3 CSSスタイル

次のCSSスタイルが存在することを確認してください。フォームの検証ステータスに基づいて、エラーメッセージを表示または非表示にする責任があります。

 .invalid-feedback、
.Empty-Feedback {
  表示：なし; /*エラーメッセージはデフォルトで非表示になります*/
}

/ *フォームがマークされていると検証され、入力ボックスが空になると、空のフィードバックが表示されます */
.was-validated：Placeholder-Shown：無効〜.Empty-Feedback {
  表示：ブロック;
}

/ *フォームがマークされ、入力ボックスが空ではなく無効な場合、無効なフィードバックが表示されます */
.was-validated：not（：placeholder-shown）：無効〜.invalid-feedback {
  表示：ブロック;
}

/*無効なフィールドのボーダースタイル*/
.is-valid、
.validated：無効{
  境界線：＃DC3545; /*赤い境界*/
}

これらのCSSルールは、以下を使用しています：無効な擬似クラスと一般的な兄弟セレクター（〜）は、フィールドの検証ステータスとそれが空であるかどうかに基づいて異なるエラープロンプトを表示します。エラーメッセージがsetcustomvalidityに設定されている場合、ブラウザはフィールドを次のようにマークします。

4.完全なコードの例

Luhnアルゴリズムの検証を統合する完全なHTML、CSS、およびJavaScriptコードは次のとおりです。

HTML（index.html）

 


  
  <meta name="Viewport" content="width = device-width、initial-scale = 1.0">
  <title>クレジットカード番号Luhn Algorithm Form vidification </title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="styleSheet">
  <style>
    /*カスタム検証フィードバックスタイル*/
    .invalid-feedback、
    .Empty-Feedback {
      表示：なし;
    }

    .was-validated：Placeholder-Shown：無効〜.Empty-Feedback {
      表示：ブロック;
    }

    .was-validated：not（：placeholder-shown）：無効〜.invalid-feedback {
      表示：ブロック;
    }

    .is-valid、
    .validated：無効{
      境界線：＃DC3545;
    }
  </style>


  <div class="container mx-auto">
    <div class="max-w-xl mx-auto my-10 bg-white p-5ラウンドMDシャドウ-sm">
      <div class="text-center">
        <h1 class="my-3 text-3xl font-semibold text-gray-700 dark：text-gray-200">
          お問い合わせ</h1>
        <p class="text-gray-400 dark：text-gray-400">
          メッセージを送信するには、以下のフォームに記入してください。
        </p>
      </div>
      <div class="m-7">
        <form action="https://api.web3forms.com/submit" method="post" id="form" class="need-validation" novalidate>
          
          <input type="hidden" name="件名" value="web3formsからの新しい提出">
          

          <div class="flex mb-6 space-x-4">
            <div class="w-full md：w-1/2">
              <label for="first_name" class="ブロックMB-2テキスト-SM Text-Gray-600 Dark：Text-Gray-400">名</label>
              <input type="text" name="name" id="first_name" placeholder="john" class="wfull px-3 py-2プレースホルダー - グレイ300ボーダー2ボーダー200ラウンドMDフォーカス：アウトラインノンフォーカス：リングフォーカス：リングインディゴ-100フォーカス：ボーダーインディゴ-300">>
              <div class="空きフィードバック無効なフィードバックText-Red-400 Text-SM MT-1">
                あなたの名を提供してください。
              </div>
            </div>
          </div>

          <div class="flex mb-6 space-x-4">
            <div class="w-full md：w-1/2">
              <label for="email" class="ブロックMB-2 Text-SM Text-Gray-600 Dark：Text-Gray-400">電子メールアドレス</label>
              >
              <div class="空のフィードバックText-Red-400 Text-SM MT-1">
                メールアドレスを提供してください。
              </div>
              <div class="無効なフィードバックText-Red-400 Text-SM MT-1">
                有効なメールアドレスを提供してください。
              </div>
            </div>
          </div>

          <div class="flex mb-6 space-x-4">
            <div id="cardcontainer" class="w-full md：w-1/2">
              <label for="cc" class="ブロックMB-2 Text-SM Text-Gray-600 Dark：Text-Gray-400">クレジットカード番号</label>
              <input type="text" id="cc" placeholder="xxxxx xxxxx xxxxx" class="wfull px-3 py-2プレースホルダー - グレイ300ボーダー2ボーダー200ラウンドMDフォーカス：アウトラインノンフォーカス：リングフォーカス：リングインディゴ-100フォーカス：ボーダーインディゴ-300">>
              <div class="空のフィードバックText-Red-400 Text-SM MT-1">
                クレジットカード番号を提供してください。
              </div>
              <div class="無効なフィードバックText-Red-400 Text-SM MT-1">
                有効なクレジットカード番号を提供してください。
              </div>
            </div>
          </div>

          <div class="mb-6">
            <button type="submit" class="wfull px-3 py-4テキストホワイトBG-indigo-500丸MDフォーカス：BG-Indigo-600フォーカス：outline-none">
              メッセージを送信</button>
          </div>
          <p class="テキストベーステキストセンターテキストグレイ-400" id="result"> </p>
        </form>
      </div>
    </div>
  </div>
   
    

JavaScript（main.js）

 （関数 （） {
  「Strictを使用」;

  /*
   *フォーム検証初期化*/
  const forms = document.queryselectorall（ "。ニーズバリデーション"）;
  const result = document.getElementById（ "result"）;

  array.prototype.slice.call（forms）.foreach（function（form）{
    form.addeventlistener（
      "提出する"、
      function（event）{
        // if（！form.checkalidity（）））を送信する前に、すべてのフィールドの有効性をもう一度確認してください。{
          event.preventdefault（）;
          event.stoppropagation（）;
          //最初の無効なフィールドフォームにフォーカスを設定します。QuerySeLectorall（ "：nivalid"）[0] .focus（）;
        } それ以外 {
          /*
           *フォーム送信にfetch（）を使用*/
          const formdata = new formdata（form）;
          event.preventdefault（）;
          event.stoppropagation（）;
          const object = {};
          formdata.foreach（（value、key）=> {
            Object [key] = value;
          }）;
          const json = json.stringify（object）;
          result.innerhtml = "待ってください...";

          fetch（ "https://api.web3forms.com/submit"、{
            方法：「投稿」、
            ヘッダー：{
              「コンテンツタイプ」：「アプリケーション/json」、
              受け入れる：「アプリケーション/json」
            }、
            ボディ：Json
          }）
            .then（async（response）=> {
              let jsonresponse = await respons.json（）;
              if（respons.status === 200）{
                result.innerhtml = jsonresponse.message;
                result.classlist.remove（ "Text-Gray-500"）;
                result.classlist.add（ "text-green-500"）;
              } それ以外 {
                console.error（response）;
                result.innerhtml = jsonresponse.message;
                result.classlist.remove（ "Text-Gray-500"）;
                result.classlist.add（ "text-red-500"）;
              }
            }）
            .catch（（error）=> {
              Console.Error（エラー）;
              result.innerhtml = "いくつかのエラーが発生しました！";
            }）
            .then（function（）{
              form.reset（）;
              form.classlist.remove（ "was-validated"）;
              setimeout（（）=> {
                result.style.display = "none";
              }、5000）;
            }）;
        }
        form.classlist.add（ "was-validated"）; //フォームを検証されたとマークし、cssディスプレイエラー}をトリガーします}、
      間違い
    ）;
  }）;

  // luhnアルゴリズムクレジットカード入力フィールドの検証$（ '＃cc'）。on（ 'input'、function（）{
    //クレジットカードのDOM要素を取得しますfield const const = document.getElementById（ 'cc'）; //またはdocument.queryselector（ '＃cardContainer input'）;
    const inputvalue = $（this）.val（）; //現在の入力値を取得する場合（checkluhn（inputValue））{
      field.setcustomvalidity（ ""）; //パスを確認し、カスタムエラーをクリアする} else {
      field.setcustomvalidity（ "invalid field。"）; //検証に失敗し、カスタムエラーが設定されています}
  }）;

  /**
   * luhn algorithm検証function * @param {string} value -string to checked * @returns {boolean}  -  luhnアルゴリズムが準拠している場合はtrueを返し、それ以外の場合はfalseを返します
   */
  関数checkluhn（value）{
    //番号、ダッシュ、またはスペースのみを含む文字列を受け入れます（/[^0-9- \ s] /.test(value））falseを返します。

    //すべての非数値文字を削除value = value.Replace（/\ d/g、 ""）;

    ncheck = 0、beven = false;
    for（let n = value.length-1; n> = 0; n  - ）{
      cdigit = value.charat（n）;
      ndigit = parseint（cdigit、10）;

      if（beven）{
        if（（ndigit *= 2）> 9）ndigit- = 9;
      }
      ncheck = ndigit;
      beven =！beven;
    }
    return（ncheck％10）=== 0;
  }
}）（）;

5。注意事項とベストプラクティス

• クライアントの検証とサーバーの検証：クライアントでのLuhnアルゴリズムの実装は、主にインスタントユーザーフィードバックを提供し、ユーザーエクスペリエンスを向上させることです。セキュリティ要件が高いシナリオでは、クライアントの検証をバイパスできるため、サーバーはすべての提出データを再確認する必要があります。
• エラーメッセージの明確性と多言語サポート：SetCustomValidity（）のエラーメッセージは明確かつ明確である必要があり、ユーザーにそれらを修正する方法をガイドします。国際的なアプリケーションの場合、これらのメッセージは多言語をサポートする必要があります。
• ユーザーエクスペリエンス：リアルタイム検証（Oninputイベント）は、ユーザーエクスペリエンスを大幅に改善し、ユーザーがエラーを見つけるために送信するまで待つのではなく、入力プロセス中にフィードバックを取得できます。
• 他の検証との協力：フィールドに複数の検証ルールがある場合（たとえば、必要なものとLuhnの検証が必要です）、setcustomvalidity性はブラウザのデフォルトエラーメッセージにオーバーライドまたは協力します。 setcustomvalidityが空でない文字列を設定すると、最初に表示されます。
• CSSスタイルのマッチング：カスタムエラーメッセージスタイル（.Invalid-Feedbackなど）が、setcustomvalidityによってトリガーされる無効なステータスに正しく応答できることを確認してください。

要約します

luhnアルゴリズムをスタンドアロンJavaScript関数にカプセル化することにより、htmlelement.setcustomvality（）APIと組み合わせて、カスタム検証ロジックを効果的に変換できます

以上がLuhnアルゴリズムを統合してクレジットカード番号フォームの確認を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。