JavaScriptは検証コードと検証のランダム生成を実装します

JavaScriptは検証コードと検証のランダム生成を実装します

この記事では、検証コードのランダム生成と検証を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

確認コード(大文字と小文字が区別されます)を入力し、「確認」をクリックして確認します。エラーが発生したときにポップアップウィンドウが表示されます

クリックするとランダムな確認コードが再生成されます

認証コードが間違って入力された場合にプロンプ​​トを表示する

<本文>
    <div class="v_code">
        <div class="code_show">
            <span class="code" id="チェックコード"></span>
            <a href="#" id="linkbt">よく見えないので、1 つ変更してください</a>
        </div>
        <div class="input_code">
            <label for="inputCode">確認コード:</label>
            <input type="text" id="入力コード">
            <span id="text_show"></span>
        </div>
        <input type="button" id="Button1" value="確認">
    </div>
    <スクリプト>
        // 1. 検証コードを生成します // 6桁の数字 0-9 af ランダムに6桁の数字を生成します。数字は0-9 af の文字列である必要があります // 配列の添え字 0、1、2... 配列からランダムに添え字 0-15 を生成します // 2. 検証して「確認」をクリックして比較します window.onload = function() {
            定数ランダムワード = () => {
                code = '' とします。
                (var i = 0; i < 6; i++) の場合 {
                    var type = getRandom(1,3);
                    スイッチ(タイプ) {
                        ケース1:
                            code += String.fromCharCode(getRandom(48,57)) // デジタルブレーク;
                        ケース2:
                            code += String.fromCharCode(getRandom(65,90)); // 大文字区切り;
                        ケース3:
                            code += String.fromCharCode(getRandom(97,122)); // 小文字の区切り;
                    }
                }
                戻りコード;
            }
            関数 getRandom(最小値, 最大値) {
                Math.round(Math.random()*(max-min)+min) を返します。
            }

            //データ取得関数を呼び出す const rand = randomWord();
            //console.log(rand);
            var checkCode = document.getElementById('checkCode');
            checkCode.innerText = rand;
        
        // クリックすると乱数が切り替わります var linkbt = document.getElementById('linkbt');
            linkbt.addEventListener('click', 関数() {
                checkCode.innerText = ランダムワード();
            })

        // 比較のために送信 document.getElementById('Button1').onclick = function() {
                var inputCode = document.querySelector('#inputCode');
                入力コードの値とチェックコードの内部テキストが等しい場合
                    alert('入力した確認コードが正しくありません');
                    入力コード値 = '';
                    false を返します。
                } それ以外 {
                    alert('入力は正しいです');
                }
            }
        }
    </スクリプト>
</本文>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSは検証コードのランダム生成を実装します
  • JavaScriptは4桁のランダム検証コードの生成を実装します
  • JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します
  • JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

<<:  MySQL カウントを向上させる方法のまとめ

>>:  Docker Compose ネットワーク設定の説明

推薦する

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

Vue3 のレンダリング関数における互換性のない変更の詳細な説明

目次レンダリングAPIの変更レンダリング関数のパラメータレンダリング関数のシグネチャの変更VNode...

Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。

1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...

spanタグのスタイルに幅属性を設定する方法

span タグのスタイルに width 属性を直接設定すると、効果がないことがわかります。 disp...

MySQL 5.7.20 Green Edition のインストールの詳細なグラフィックチュートリアル

まず、MySQL とは何かを理解しましょう。 MySQL は、スウェーデンの会社 MySQL AB ...

JS ES6 非同期ソリューション

目次最初にコールバック関数を使用するes6 非同期処理モデルこの非同期モデルに合わせたAPI: pr...

MySQLのグローバルロックとテーブルロックに関する詳細な理解

序文ロックの範囲に応じて、MySQL のロックは、グローバル ロック、テーブル ロック、行ロックに大...

カルーセル効果を実現するjQueryプラグイン

毎日jQueryプラグイン - カルーセルチャートを実装するためのjQueryプラグイン。参考までに...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

HTML タイトルに二重引用符を追加する方法

<a href="https://www.jb51.net/" title...

Docker で MySQL をインストールし、リモート接続を実装するチュートリアル

画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...

Docker を使用してコンテナ内のルート パスワードを変更する方法

1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...

Zabbix を使用して Oracle データベースを監視する方法の詳細な説明

1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...

MySQLテーブルをコピーする方法

目次1.mysqlダンプ実行プロセス:特徴2. CSVファイルをエクスポートする(最も柔軟性が高い)...