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 ネットワーク設定の説明

推薦する

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

CSS最適化スキルの自己実践体験

1. CSS スプライトを使用します。利点は、CSS で使用される小さな画像を 1 つの大きな画像に...

ソースコードから MySQL 8.0.20 をコンパイルしてインストールする詳細なチュートリアル

前回の記事では、次のことを紹介しました。 MySQL8.0.20 インストール チュートリアルとイン...

Vue ページレンダリングにおけるキーの適用例チュートリアル

導入フロントエンドプロジェクトの開発プロセスでは、el-table によって表示される結果列がコンポ...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

Samba を使用して Linux サーバー上で共有ファイル サービスを構築する方法

最近、私たちの小さなチームは、サーバー上の共有フォルダーを共有して、全員がパブリックリソースドキュメ...

ウェブページ HTML 特殊記号 HTML 特殊文字比較表

特殊記号名前付きエンティティ10進数エンコード特殊記号名前付きエンティティ10進数エンコードアルファ...

MySQLデータベースでの値の追加、変更、削除、クリアの例

3. MySQLデータ管理最初の方法:お勧めできません。複雑そうです -- 学生テーブルの grad...

MySQL の不正な文字列値の解決方法

MySQL を使用して中国語の文字を挿入すると、多くの友人から次のエラーが報告されます。 これは、文...

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...

CentOS7.4 起動時の緊急モードへようこそメッセージに対する解決策

今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...

Linux\Nginx 環境での仮想ドメイン名の設定とテスト検証

Nginx 仮想ドメイン名設定を使用すると、ドメイン名を購入せずに特定のドメイン名を介してローカル ...

IE8 ベータ 1 には注意が必要な 2 つの領域があります

<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...

MySQL よく使われる関数の詳細な概要

目次MySQL 共通関数1. 数値関数文字列関数3. 時間機能4. システム機能5. 集計関数MyS...