工作笔记5.JAVA文本框验证码

绝地灬酷狼 2022-08-13 13:46 139阅读 0赞

本文主要内容为：利用JAVA**文本框制作验证码**。

设计思路：

> 1、页面加载时，自动生成验证码。
> 
> 2、后JS判定验证码是否输入正确

优点：

代码简洁，便于使用。页面中可直接判定验证码的正确性，无需传到后台Action中。

缺点：

由于本验证码是由text制作，容易被浏览器抓取/手动copy，丢失了其本质特性（安全性）。

<script type="text/javascript">
    	var code ; //在全局 定义验证码
    	function createCode()
    	{        
    		code = "";
    		var codeLength = 4;//验证码的长度
    		var checkCode = document.getElementById("checkCode");
    		var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');// 所有候选组成验证码的字符，当然也可以用中文的
    		 
    		for(var i=0;i<codeLength;i++)
    		{   
    			var charIndex = Math.floor(Math.random()*34);
    			code +=selectChar[charIndex];         
    		}
    		
    		if(checkCode)
    		{
    			checkCode.className="code";
    			checkCode.value = code;
    		}
    		 document.getElementById("code").focus();
    	}
    	
    	function check()
    	{          
    		if(document.getElementById("code").value.replace(/\\s/g,'') != code )
    		{
    			alert("验证码输入错误！区分大小写");
    			createCode();//刷新验证码
    			document.getElementById("code").focus();
    			return false;
    		}
      
    	}
    
    </script>

</pre><pre code_snippet_id="501094" snippet_file_name="blog_20141029_2_4692873" name="code" class="html"><body οnlοad="javascript:createCode();">
    	<s:form action="user_login"  οnsubmit="return check()">			
    		<input type="text" id="code" class="dz" style="width: 110px;" />									
    		<input type="text" οnclick="createCode()" readonly="readonly" id="checkCode" class="code" title="换一张"
    			style="width: 68px; height: 27px; cursor:not-allowed" />
    	</s:form>
    </body>

发表评论取消回复

表情：

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

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

相关阅读

相关 H5实现短信验证码文本框功能（依次聚焦文本框）

H5界面实现验证码校验（4位数6位数均可自定义）如图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

Myth丶恋晨/ 2023年01月03日 01:44/ 0 赞/ 391 阅读

相关文本框验证小集合

本次集合了几种常见的验证，用的时候只要在页面载入的时候初始化一次即可。核心代码： //检测类型 if (options.rule) {

骑猪看日落/ 2022年08月25日 14:48/ 0 赞/ 92 阅读

相关工作笔记5.JAVA图片验证码

本文主要内容为：利用JAVA图片制作验证码。设计思路： > 1、拷贝AuthImageServlet.class图片验证码 > > 2、配置web.xml >

r囧r小猫/ 2022年08月13日 13:47/ 0 赞/ 80 阅读

相关工作笔记5.JAVA文本框验证码

本文主要内容为：利用JAVA文本框制作验证码。设计思路： > 1、页面加载时，自动生成验证码。 > > 2、后JS判定验证码是否输入正确优点：

绝地灬酷狼/ 2022年08月13日 13:46/ 0 赞/ 140 阅读

相关 PyQt5笔记（04） -- 文本框的使用

目录 [PyQt5笔记（01） – 创建空白窗体][PyQt5_01_ _] [PyQt5笔记（02） – 按钮点击事件][PyQt5_02_ _] [PyQt5

妖狐艹你老母/ 2022年06月03日 08:25/ 0 赞/ 415 阅读

相关 laravel5 验证码及乱码

首先在laravel5框架public目录下创建一个控制器Code.php类,代码如下: <?php / Created by PhpStorm. User: r

谁借莪１个温暖的怀抱￠/ 2022年05月20日 03:06/ 0 赞/ 189 阅读

相关文本框验证正则表达式

只能输入数字： <input type="text" id="e_Phone" name="e_Phone"

川长思鸟来/ 2022年04月03日 01:47/ 0 赞/ 353 阅读

相关 laravel5.7验证码并验证登录

跑验证码第三方包 composer require mews/captcha 在`config/app.php`进行配置 ‘providers’ => \[

﹏ヽ暗。殇╰゛Y/ 2022年03月17日 16:26/ 0 赞/ 292 阅读

相关 tp5 验证码验证验证码刷新

首先使用`Composer`安装`think-captcha`扩展包： composer require topthink/think-captcha 在控制器中使

我会带着你远行/ 2022年02月23日 14:16/ 0 赞/ 370 阅读

相关短信验证码工作原理

短信验证码工作原理我们的在注册各大网站或者APP的时候，经常会遇到填写验证码的情况。验证码的设置是平台为了验证用户身份而专门设置的安全机制。那么，问题来了：短信验证码在网络

浅浅的花香味﹌/ 2021年12月03日 07:07/ 0 赞/ 747 阅读