简易验证码校验

àì夳堔傛蜴生んèń 2022-11-20 05:59 168阅读 0赞

## 验证码案例： ##

先看效果图：  
  
  
![在这里插入图片描述][20201106201216799.png_pic_center]

*核心思路如下：*

> 一、（获取验证码）定义一个字符串，用于存放验证码字符库：A~Z 0~9。再定一个空字符串用于存放生成的当前的若干位验证码。最后将验证码放到按钮上。

> 二、获取文本框的值，与生成的二维码作比较。

`scirpt核心代码如下：`

<script>
    
          //执行获取验证码（默认）
          getCode();
    
    
    
    
          /*获取验证码*/
          function getCode() { 
              /* 定义一个字符串，用于存放能产生验证码的字符：A~Z 0~9 */
              var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
              var code = "";
              var gCode = document.getElementById("getCode");
              /*循环获取6个字符*/
              for (var i = 0; i < 6; i++) { 
                  code += str[Math.floor(Math.random()*36)];
              }
              /*把验证码放上去*/
              gCode.innerHTML = code ;
          }
    
    
          /*2.验证验证码*/
          function validCode() { 
              var inputStr = document.getElementById("inputCode").value;
              var codeStr = document.getElementById("getCode").innerHTML;
              if(codeStr == inputStr){ 
                  alert("验证成功");
              }else { 
                  alert("验证失败");
              }
          }
    
      </script>

`HTML结构代码如下：`

<form action="" name=" ">
         <input type="text" id="inputCode" >
         <button id="getCode" onclick="getCode();"></button>
         <button              onclick="validCode();">验证</button>
     </form>

`CSS样式代码如下：`

无

[20201106201216799.png_pic_center]: /images/20221120/cc1383728a514d13a2362d74d80d410e.png

发表评论取消回复

表情：

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

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

相关阅读

相关验证参数注解校验总结

验证参数注解校验总结 **【参数校验注解的使用规则方法】：** 空检查 @Null 验证对象是否为null @Not...

野性酷女/ 2024年04月18日 08:34/ 0 赞/ 71 阅读

相关 springboot中实现生成验证码和登录校验功能

前言网上实现生成验证码的方式有很多，我这里只记录下使用 kaptcha 生成验证码的方式。实现思路 1、整合 kaptcha ，创建 kaptcha 的工具类

ゝ一纸荒年。/ 2024年04月01日 15:56/ 0 赞/ 86 阅读

相关 java发送QQ邮箱验证码实现登录注册、邮箱验证码防刷校验

文章目录一：前台功能实现 1.1 页面编写 1.2 发送验证码——sendEmailCode 1.2.1 远程调用发

淩亂°似流年/ 2024年03月16日 17:20/ 0 赞/ 95 阅读

相关 java实现滑动块验证登录，验证码校验，滑动验证码，字符验证码

码云地址：[https://gitee.com/gester/captcha][https_gitee.com_gester_captcha] 实现效果： ![wat

￡神魔★判官ぃ/ 2022年12月17日 08:46/ 0 赞/ 382 阅读

相关简易验证码校验

验证码案例：先看效果图： ![在这里插入图片描述][20201106201216799.png_pic_center] 核心思路如下： > 一、（获

àì夳堔傛蜴生んèń/ 2022年11月20日 05:59/ 0 赞/ 169 阅读

相关【javaweb:servlet】校验登录界面的验证码！

package indi.login; import java.io.IOException; import javax.servlet.Se

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 09:48/ 0 赞/ 267 阅读

相关 MVC 验证码实现（简易版）

现在网站上越来越多的验证码，使用场景也是越来越多，登陆、注册、上传、下载。。。等等地方，都有可能大量使用到验证码，那么制作验证码到底有多简单呢？我们一起来看下最简易版的验证码实

朴灿烈づ我的快乐病毒、/ 2021年10月24日 02:38/ 0 赞/ 321 阅读

相关 php制作验证码与服务端的校验

之前接触过php数据库，今天在网上看老师用php制作验证码验证码是什么：验证码是一种区分用户是计算机还是人的公共程序制作验证码需要四步 1：生成底图 2：生成验证内

喜欢ヅ旅行/ 2021年09月15日 23:30/ 0 赞/ 304 阅读

相关 AJAX应用【股票案例、验证码校验】

股票案例我们要做的是股票的案例，它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中，它会显示具体的信息。我们首先来看一下要做出来的效果： ![这里写图片描述]

落日映苍穹つ/ 2021年09月14日 19:12/ 0 赞/ 387 阅读

相关常用校验码（奇偶校验码、海明校验码、CRC校验码）

转载自：[https://www.cnblogs.com/VersionP1/p/7779251.html][https_www.cnblogs.com_VersionP1_p

Love The Way You Lie/ 2021年08月19日 22:38/ 0 赞/ 2725 阅读