JavaScriptを使用して検証コードを取得する効果を実現する方法-jsチュートリアル-php.cn

JavaScriptを使用して検証コードを取得する効果を実現する方法

yulia

リリース： 2018-10-17 10:35:12

オリジナル

9536 人が閲覧しました

Web サイトを閲覧しているときに、ほとんどすべての Web サイトでログイン時に確認コードの確認が必要であることに気づきましたか? JS を使用して確認コードを取得する方法をご存知ですか?この記事では、JS を使用して検証コードを記述する方法について説明し、JS で検証コードを取得するためのコードを共有します。これには一定の参考値があり、興味のある友人はそれを参照できます。

JS を使用して検証コードを取得したい場合は、random()、if 関数、for ループなど、JavaScript に関する多くの知識を使用する必要があります。よくわからない場合は、 PHP 中国語 Web サイトの関連記事を参照するか、JavaScript ビデオチュートリアルにアクセスしてください。

JS を使用して検証コードを取得する簡単なコードを作成しました (CSS スタイルを設定するだけで、JavaScript 部分に注目します)。具体的なコードは次のとおりです。

HTML 部分:

<body onload=&#39;createCode()&#39;> 
        <div>验证码：  
            <input type = "text" id = "input"/>  
            <input type="button" id="code" onclick="createCode()" style="width:60px" title=&#39;点击更换验证码&#39; /></br>
            <input type = "button" value = "验证" onclick = "validate()"/>
        </div>  
</body>

ログイン後にコピー

CSS 部分:

 #code{
             font-family:Arial,宋体;
             font-style:italic;
             color:green;
             border:0;
             padding:5px 10px;
             letter-spacing:3px;
             font-weight:bolder;
         }

ログイン後にコピー

JavaScript 部分:

var code ; //在全局定义验证码         
        function createCode(){
             code = "";   
             var codeLength = 4;//验证码的长度  
             var checkCode = document.getElementById("code");   
             var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,
             &#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,&#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,
             &#39;Z&#39;);//随机数  
             for(var i = 0; i < codeLength; i++) {//循环操作  
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
            }  
            checkCode.value = code;//把code值赋给验证码  
        }
        //校验验证码  
        function validate(){  
            var inputCode = document.getElementById("input").value.toUpperCase(); 
            //取得输入的验证码并转化为大写        
            if(inputCode.length <= 0) { //若输入的验证码长度为0  
                alert("请输入验证码！"); //则弹出请输入验证码  
            }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
                alert("验证码输入错误!"); //则弹出验证码输入错误  
                createCode();//刷新验证码  
                document.getElementById("input").value = "";//清空文本框  
            }else { //输入正确时  
                alert("验证通过");
            }
        }

ログイン後にコピー

JavaScript が検証コードを取得する具体的な手順は、コード内で詳しく説明されています。コメントで説明するため、ここでは繰り返しません。検証コードの効果は次の図に示されています。

JavaScriptを使用して検証コードを取得する効果を実現する方法