首頁 > 文章 > web前端 > js如何實作前台驗證碼？（代碼）

js如何實作前台驗證碼？（代碼）

不言原創: 2018-08-15 15:55:331890瀏覽

本篇文章帶給大家的內容是關於js如何實作前台驗證碼？（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

能來查這個知識點的同學，想必是已經最少掌握了一點點JavaWeb知識了吧，應該可以看得懂這段程式碼知道怎麼用的吧！

<body>
  <div class="input">
            &nbsp&nbsp<span 
style="font-size:16px;font-family: 
黑体">验证码:</span>&nbsp<input id="t1" type="text" name="u" 
 onblur="but()" />
                   <span id="discode"></span>
                   <input type="button" value="点击刷新" class="c" style="height:20px;"onClick="createCode()">
      </div>
<script language="javascript">
        var code; //在全局 定义验证码
        function createCode() { //创建验证码函数
            code = "";
            var codeLength = 4;//验证码的长度
            var selectChar = 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 charIndex = Math.floor(Math.random() * 36);
                code += selectChar[charIndex];
            }
            // 设置验证码的显示样式，并显示
            document.getElementById("discode").style.fontFamily = "黑体"; //设置字体
            document.getElementById("discode").style.letterSpacing = "20px"; //字体间距
            document.getElementById("discode").style.color = "red"; //字体颜色
            document.getElementById("discode").innerHTML = code; // 显示
        }
        function but() {//验证验证码输入是否正确
            var val1 = document.getElementById("t1").value;
            var val2 = code;
            if (val1 != val2) {
                
                document.getElementById(&#39;t1&#39;).value = "";
            }
        }
    </script>
</body>

# 求js程式碼能夠將使用者輸入的手機號碼，驗證，並傳入後台的程式碼

以上是js如何實作前台驗證碼？（代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

封装 JS

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js原型物件和原型鏈的分析介紹（附程式碼）下一篇：js原型物件和原型鏈的分析介紹（附程式碼）

看更多

js如何實作前台驗證碼？ （代碼）

# 求js程式碼能夠將使用者輸入的手機號碼，驗證，並傳入後台的程式碼

相關文章

js如何實作前台驗證碼？（代碼）