検証コードケースの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 を応援していただければ幸いです。

以下もご興味があるかもしれません: