検証コードケースのJavaScript実装

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

本日のケースでは、効果は以下のとおりです。

このケースを実装する上で、実はそれほど難しいことはありません。一緒に見ていきましょう。

html と css の実装についてはここでは説明しません。以下のコードと比較しながら細部に注意しながら自分で実装してください。

次に、js の実装を見てみましょう。

私たちが行う必要があることは 2 つあります。

1.ページを更新したり、変更をクリックしたときに検証コードを生成できるように、検証コードをランダムに生成します。
2. 入力文字列と検証コードを比較する

まずfor ループMath.round(Math.random()*n)を使用して、各ループで乱数を生成する必要があります。

次にinput.valueを通じてユーザーが入力した文字列を取得し、それをランダムに生成された文字列と比較するだけです(===を使用)。

その他の詳細はコードに記載されています。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        。容器{
            幅: 400ピクセル;
            高さ: 100px;
            マージン:100px 自動;
            背景色: hsla(180, 73%, 78%, 0.199);
            境界線の半径: 20px;
            テキスト配置: 中央;
            パディング: 20px;
        }
        #チェック{
            表示: インラインブロック;
            幅: 100ピクセル;
            高さ: 30px;
            テキスト配置: 中央;
            背景色: rgba(128, 128, 128, 0.158);
            色:青;
            フォントサイズ:26px;
            フォントスタイル: 斜体;
            文字間隔: 2px;
            フォントファミリー:Arial、Helvetica、sans-serif;
            下マージン: 10px;
        }
        .ma{
            下部マージン: 12px;
        }

    </スタイル>
</head>

<本文>
    <div class="コンテナ">
        <div>
            <span id="check">adf34y</span>
            <a href="#" id="checka">不明瞭な場合は変更してください</a>
        </div>
        <div class="ma">
            <label for="zheng">確認コード</label>
            <input type="text" id="zheng">
        </div>
        <button id="btn">OK</button>
    </div>

    <スクリプト>
        合計を[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']とします。
        var チェック = document.getElementById("チェック");
        var コード;
        
        関数fun(){
            str="";とします。
            (i=0;i<6;i++) の場合{
                let pos=Math.round(Math.random()*15); //この書き方に注意して、乱数を取得します str+=sum[pos];
            }
            チェック.innerHTML=str;
            str を返します。
        }

        window.onload = 関数(){
            コード=楽しい();
        }

        checka = document.getElementById("checka"); とします。
        checka.onclick=関数(){
            コード=楽しい();
        }
        
        btn = document.getElementById("btn"); とします。
        btn.onclick=関数(){
            t=document.getElementById("zheng").value; とします。
            コンソールログ
            if(t==コード){
                アラート("正しい");
                コード=楽しい();
                document.getElementById("zheng").value="";
            }
            それ以外{
                警告("エラー");
                document.getElementById("zheng").value="";
            }
        }
        

    </スクリプト>
</本文>

</html>

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

以下もご興味があるかもしれません:
  • ページ検証コードを生成する JSP メソッド [コード付き]
  • JavaScript 検証コードの例コード (効果図付き)
  • jsはシンプルな検証コードを実装します
  • jsはクリックして確認コードを取得するカウントダウン効果を実現します
  • JS検証コード機能を実装する3つの方法
  • jsで生成された検証コードの実装と技術分析
  • jsは検証コードを生成し、フロントエンドで直接判断します
  • js+ca​​nvasはスライディングパズルの検証コードの機能を実現します
  • JSはグラフィック検証コードの実装コードを作成します
  • jsはログイン登録ボックスの携帯電話番号と確認コードの検証を実装します(フロントエンド部分)

<<:  あまり使われていない、または誤解されている HTML タグ 10 個

>>:  Dockerコンテナ間のホスト間通信 - オーバーレイベースの実装方法

推薦する

MySQL の分離レベルの包括的な分析

データベースが同じデータ バッチを同時に追加、削除、および変更すると、ダーティ書き込み、ダーティ読み...

HTML 画像 img にハイパーリンクを追加した後の醜い青い境界線の問題を解決する

HTML画像にハイパーリンクを追加すると醜い青い枠線が表示される次のように:解決: CSS スタイル...

HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...

CentOs システムで Python と yum をアンインストールするソリューション

事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

Vueは小さなフォーム検証機能を実装します

この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

HTML チュートリアル: DOCTYPE の省略形

HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...

docker-compose で Jenkins をインストールする際の実践的なメモ

ディレクトリを作成する cd /usr/local/docker/ jenkins-docker を...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

MySQLデータベースバックアップのさまざまな実装方法の概要

この記事では、MySQL データベースのバックアップを実装するさまざまな方法について説明します。ご参...

Vue の計算プロパティ

目次1. 基本的な例2. 計算プロパティキャッシュとメソッド3. 計算プロパティセッター序文:通常、...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

MySQL における in と exists の使い方と違いの紹介

まずコードを書いて (int i=0;i<1000;i++){ (int j=0;j<5...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...