クレジットカード番号チェック機能をフォームアシストに組み込んでみた

クレジットカード番号チェック機能をフォームアシストに組み込んでみた

どうもエージェントYです。
今回は、もうブログのセンスとネタがないので・・・社内の誰にも説明してない1時間ぐらいで作った機能を紹介します。

その機能とは↓

クレジットカード番号が正しいかどうかその場で確認してくるおもてなし機能!!

クレジットカード番号チェックのおもてなし機能

とりあえず下記入力フォームにてクレジットカードの番号を全て入力して見てください。
全て入力して、項目から離れたら処理が実行されます。

※入力された情報は保存されませんのでご安心ください。

[code]

[/code]

あくまでモックですよ〜

正誤判定の計算方法

サンプルのカード番号:1254 1254 1254 1254

それぞれの4桁の数字の奇数項目を2倍にする
2倍にした数が10以上の場合-9で1桁に戻す。

計算後:2214 2214 2214 2214 2214

その後、それぞれの数字を合計していきます。

2+2+1+4+2+2+1+4+2+2+1+4+2+2+1+4 = 36

合計値が10の倍数であれば正確なクレジットカード番号となります。
今回のサンプルの場合は、「36」で10の倍数ではない=クレジットカード番号ではないので、吹き出しで再確認するよう呼びかけるように設定してます。

送信ボタンをおして、DBに参照してエラーとして返答されるよりかは、
入力中に判断された方が、入力のスピードもあがると思って今回作ってみました。

採用されるかどうかはわかりませんがね・・・・

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...