cari

Rumah >hujung hadapan web >tutorial js >js如何实现前台验证码？（代码）

js如何实现前台验证码？（代码）

不言
不言asal
2018-08-15 15:55:331923semak imbas

本篇文章给大家带来的内容是关于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 email验证、js url验证、js长度验证、js数字验证等简单封装_表单特效

 JS 常用验证REG

 求js代码能够将用户输入的手机号，验证，并传入后台的代码

Atas ialah kandungan terperinci js如何实现前台验证码？（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

封装 JS
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js原型对象和原型链的分析介绍（附代码）Artikel seterusnya：js中with语句可以怎么用？js中with语句的用法（代码）

Artikel berkaitan

Lihat lagi