使用JavaScript方法实现随机验证代码并且实现验证

忘是亡心i 2021-07-25 02:13 464阅读 0赞

**验证码**  
验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的。这里我们使用JS来模拟验证码

## 思路 ##

**思路一**  
我们可以定义一个包含所有数字和字母的字符串str  
获取它的长度str.length  
在\[0,str.length-1\]的区间内随机生成一个数字num  
通过随机位置num返回当前指定的字符串，str.charAt(num)  
生成四个后，拼接成一个新的字符串(concat)  
这种方法可行不可取，代码可读性不强  
**思路二**  
可以利用字符串和正则表达式，和上面的方式都是半斤八两

## body下面的基本样式 ##

<span id="code" style="background-color: #ccc">1010</span>
        <input type="button" value="刷新" οnclick="randomCode()"><br>
        <input type="text" id="txt" placeholder="请输入验证码">
        <input type="button" value="提交" οnclick="checkCode()">

## 在Js里面写方法 ##

<script>
            //获取元素
            var code = document.getElementById('code');
            var txt = document.getElementById('txt');
            //新建字符串，字符串中包含所有的值
            var str = '0123456789abcdefghijklmnopqrstuvwxyz'; //封装函数 function randomCode() { 
                //定义一个空的字符串
                var strNew = '';
                // 随机产生四位字符，放在code元素里
                for (var i = 0; i < 4; i++) { 
                    var index = parseInt(Math.random() * str.length);
                    strNew += str.charAt(index);
                }
                // 设置code元素的innerText
                code.innerText = strNew;
            }
    
            //验证输入的是否正确，函数封装 function checkCode() { 
                if (txt.value == code.innerText) { 
                    alert('验证成功');
                } else { 
                    alert('验证失败，请重新输入');
                    txt.value = '';
                    randomCode();
                }
            }
        </script>

上面就是一个简单的验证码封装代码 可以适应很多场景  
主要还是利用正则判断 和 字符串的理解

发表评论取消回复

表情：

评论列表（有 0 条评论，464人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现随机验证码并验证

前言在许多登录页面里，我们都可以看到验证码的身影，每次登录都需要重新输入验证码。这个功能非常重要，它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不

àì夳堔傛蜴生んèń/ 2023年01月13日 15:00/ 0 赞/ 238 阅读

相关 12306验证码java实现_基于Java实现随机字母数字验证码

生成随机验证码 VerifyCode 工具类 package com.meeno.common.cerifycode; import java

电玩女神/ 2023年01月10日 09:54/ 0 赞/ 263 阅读

相关验证随机数案例java_Java实现随机验证码功能实例代码

现在许多系统的注册、登录或者发布信息模块都添加的随机码功能，就是为了避免自动注册程序或者自动发布程序的使用。验证码实际上就是随机选择一些字符以图片的形式展现在页面上，如果进

墨蓝/ 2022年11月09日 11:17/ 0 赞/ 223 阅读

相关 jQuery canvas实现随机验证码

[下载地址][Link 1]jQuery和canvas实现的随机验证码，点击可以改变。 ![1631560733.png][] dd: [Link 1]: https:

朴灿烈づ我的快乐病毒、/ 2022年09月13日 01:58/ 0 赞/ 34 阅读

相关 JS实现随机验证码

验证码验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的

待我称王封你为后i/ 2022年03月29日 09:41/ 0 赞/ 453 阅读

相关 javascript实现验证码功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

以你之姓@/ 2022年03月26日 01:06/ 0 赞/ 415 阅读

相关用JavaScript实现文字验证

用JavaScript实现文字验证开发工具与关键技术：JavaScript 作者：陈希雄撰写时间：2019/2/26 <head>

电玩女神/ 2022年03月16日 05:20/ 0 赞/ 338 阅读

相关 javascript随机验证码

随机验证码 box { width: 100px; height: 40px;

川长思鸟来/ 2022年01月28日 00:29/ 0 赞/ 332 阅读

相关 Java实现随机验证码功能

<table style="width: 97%;"> <tbody> <tr> <td align="center">来源：68design.net　<sp

小灰灰/ 2021年09月10日 09:58/ 0 赞/ 506 阅读

相关使用JavaScript方法实现随机验证代码并且实现验证

验证码验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的。

忘是亡心i/ 2021年07月25日 02:13/ 0 赞/ 465 阅读