验证码的生成与校验（有注释）

最新推荐文章于 2022-03-22 08:14:27 发布
最新推荐文章于 2022-03-22 08:14:27 发布
阅读量184 收藏
点赞数
文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47997447/article/details/120627862
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .yanzhengma{
                width: 650px;
                /* background-color: #0000FF; */
                height: 300px;
                margin: 0 auto;
                /* text-align: center; */
                padding-top:20px;
            }
            .code{
                height: 60px;
                /* background-color: aqua; */
            }
            .code a{
                width: 120px;
                height: 60px;
                /* background-color: aquamarine; */
                display: inline-block;
                position: absolute;
                line-height: 70px;
                margin-left: 10px;
            }
            #two{
                display: inline-block;
                position: relative;
                width: 80px;
                height: 30px;
                margin-left: 180px;
                margin-top: 20px;
                /*  */
                background-color: #0000FF;
            }
            .one{
                position: absolute;
                line-height: 30px;
                margin-left:13px;
                /* padding: 4px 3px;
                margin-right: 3px;
                margin-bottom: 13px;
                margin-left: 180px; */
            }
            
            .input{
                width: 450px;
                height: 50px;
                /* background-color: aquamarine; */
                margin-top: 10px;
                margin-left: 170px;
            }
            #button1{
                margin-left:250px;
                
            }
        </style>
    </head>
    <body>
        <div class="yanzhengma">
            <div class="code"> 
                <div id="two">
                    <span class="one" id="checkcode">adfh34</span>
                </div>
                <a id="linkad" href="#">看不清，换一张</a>
            </div>
            <div class="input">
                <label for="inputcode" class="">验证码</label>
                <input type="text" id="inputcode"  />
                <span id="text_code"></span>
            </div>
            <input id="button1" type="button" value="确定" />
        </div>
        
    </body>
    <script>
    // 获取对象
        var linkad = document.getElementById('linkad')
        var checkcode = document.getElementById('checkcode')
        // 页面打开就获取验证码
            window.onload = function(){
                var res = yanzhengma();
                // 获取六个随机数，并封装在yanzhengma函数中。
                function yanzhengma(){
                    var arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
                    var str = '';
                    for(var i = 0; i < 6; i++){
                        // math.round方法取整，math.random方法获取一个随机小数。
                        let num = Math.round(Math.random()*(15 - 0) + 0);
                        // 注意这里str规定是空字符，不是数组，不是number值。所以可以获得六个字符的字符串。
                        str += arr[num];
                    }
                    return str;
                }
                // 把获取到的字符串传给验证码字符。
                checkcode.innerText = res;
                // 点击换一张字符。
                linkad.onclick = function(){
                    let res = yanzhengma()
                    checkcode.innerHTML = res;
                }
                // 点击确定事件。
                document.getElementById('button1').onclick = function(){
                    // 先获取验证码
                    var code = checkcode.innerHTML;
                    // 再获取输入的值。
                    var code1 =document.getElementById('inputcode').value;
                    // 两者校验。
                    if( code != code1){
                        document.getElementById('text_code').innerHTML = '验证码错误，请重新输入！'
                        return
                    }
                    else{
                        location.href = 'www.baidu.com';
                     }
                }
            }        
    </script>
</html>

 

 B站学习，你我共同进步！

codekjy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android生成验证码
08-07
本文将详细讲解如何在Android应用中自定义生成验证码，包括验证码的长度、类型以及比对机制。 首先，验证码的生成通常涉及到...通过阅读和理解这段代码，可以深入掌握Android自定义View的用法以及验证码生成的逻辑。
也谈代码中注释的问题
Franker的专栏
04-03 3138
对于代码注释，大家较为一致的看法是代码中一定要有注释，这是毫无疑问的，但是如何去写注释，却是各有各的说法，今天看到一篇博客，其观点是：注释只写why，不写what和how。当然，前提是代码已能够很容易看出 what和how了。看了这博客，我也想谈谈这方面的看法。         在注释的问题上，很久以前还跟我的一位同事吵过，那位同事在代码上密密麻麻地写满注释，他让我也要这样做，这让我很不能接受，
html中lable的for属性,关于html中<label>标签的for属性的详细分析
weixin_35231383的博客
06-07 1031
这篇文章给大家介绍的内容是关于html中标签的for属性的详细分析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中，看到这样一段话，It is considered best practice to set a for attribute on the label eleme...
注释前端的验证码
morningsun19的博客
06-05 394
   前端的验证码防止暴力破解。在作自动化的时候，需要把前端的验证码注释掉1.在部署项目的时候，现在本地解压war包，找到找到application.properties文件，打开该文件2.修改application.properties的配置verifyCode.isVerify=false代表验证码无效，在作自动化测试的时候，随便填一个数就可以了...
Java中使用注解校验参数
BruceBupt的博客
02-09 9573
一、参数校验的注解 Java中参数校验的注解来自三方面，分别是 javax.validation:validation-api，对应包javax.validation.constraints org.springframework:spring-context，对应包org.springframework.validation org.hibernate:hibernate-validator，对应包org.hibernate.validator.constraints 1.啊 validatio
前后端分离验证码生成及校验（前后端代码都有，解释注解也全）
lusutao的博客
02-24 3462
验证码生成后端 第一步 先导入依赖 <dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha</artifactId> <version>0.0.9</version> </dependency> 第二步 验证码配置类或者配置xml 在这里对于验证码的格式等进行设置。 <?xml version="1.0
生成验证码（带详细注释、Servlet已获取生成的验证码和输入的验证码）
04-12
总结，本项目实现了基于Java Servlet的验证码生成与验证功能，涵盖了随机数生成、图像处理、HTTP交互等多个技术点。通过对验证码的生成、发送、验证以及前端的交互处理，确保了用户输入的安全性和系统的可靠性。
简单验证码
03-30
为达到最佳效果，推荐使用九网互联的ASP.net空间，支持ASP.net版本1.1和2.0在线切换、在线脚本映射、ASP.net具体错误信息在线查看。一个利用验证码登陆校验的小例子，验证码都是...ValidateCode.aspx为验证码生成文件
itcast-tool-1.4.2.jar
07-21
ITCAST-TOOL-1.4.2.jar可能提供了生成和验证验证码的API，允许开发者在自己的应用中集成这一功能，以确保用户交互的真实性和安全性。 邮箱校验则是另一种重要的数据验证手段，用于确保输入的邮箱地址符合标准格式，...
jfinal登录/注册；有验证码验证，可运行
08-10
本项目中，可能会使用第三方库如JCaptcha或者自定义生成算法来生成图片验证码，并将其显示在登录/注册界面。用户输入验证码后，后台会进行比对，只有正确时才会继续处理登录或注册请求。 4. **JFinal的验证机制** ...
注解验证
03-24
NULL 博文链接：https://liyixing1.iteye.com/blog/1020314
验证码生成与验证例子,验证码例子
06-09
验证码生成与验证例子,验证码例子，验证码
生成验证码
幸福的拾荒者
01-07 462
页面    GenerateCheckCode                        runat="server" ImageUrl="~/GenerateCheckCode.aspx">    private void Page_Load(object sender, System.EventArgs e)  {   // 在此处放置用户代码以初始化页面   string c
Spring 自定义注解(验证码)
百般回首曾经的相遇，留下的只是一缕残忆
07-14 1118
均在 Validator 包下 import org.thymeleaf.util.StringUtils; import javax.servlet.http.HttpServletRequest; import javax.validation.ConstraintValidator; import javax.validation.ConstraintValidatorContext; ...
实现验证码的代码（有注释）教会你怎样实现验证码！
永不停歇
12-06 864
$im = imagecreatetruecolor(80,23);//创建画布 $bgcolor = imagecolorallocate($im,220,230,230);//调制背景色 $bordercolor = imagecolorallocate($im,0,0,255);//调制边框颜色 $tcolor = imagecolorallocate($im,255,0,0); $
验证码生成与校验
weixin_44117272的博客
07-13 399
1.生成UUID @ApiOperation(value = "获取图形验证码Id") @RequestMapping(value = "/image/getCode", method = {RequestMethod.GET, RequestMethod.POST}) public ApiResult getImageVerifyCodeId() { return success(imageVerifyCodeService.generateCodeId());
【字符验证码识别】验证码识别方法解析
赖德发的博客
03-22 1906
字符验证码主要以数字和英文字母为主，辅以部分干扰线和彩色噪点，并且对字符元素使用随机颜色，甚至是角度倾斜。 方法1：我们用ddddocr 大法 直接可识别此验证码。其实针对这种简单的验证码足以应对。 import ddddocr save_path = 'D:/Programs/爬虫项目/字符验证码识别/' if not os.path.exists(save_path): os.makedirs(save_path) ocr = ddddocr.DdddOcr(old=True) with o
Python+Django登录网站：验证码生成与识别系统设计详解
本研究文档深入探讨了基于Python和Django框架构建的登录网站验证码生成与识别系统的详细设计与实现。 首先，章节一概述了研究的背景，强调了在当前网络安全形势下，验证码的重要性，以及传统字符型验证码存在的用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值