JavaScript 随机验证码的生成实例代码

随机验证码的生成

1： 主体部分

<script>
 var code ; //在全局 定义验证码
function createCode()
   {
    code = "";
    var codeLength = 6;//验证码的长度
    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','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');//所有候选组成验证码的字符，当然也可以用中文的 

    for(var i=0;i<codeLength;i++)
    { 

    var charIndex = Math.floor(Math.random()*36);
    code +=selectChar[charIndex]; 

    }
//    alert(code);
    if(checkCode) //这里不是很懂,有高手可以解释下
    {
     checkCode.className="code";
     checkCode.value = code;
    } 

   } 

function validate ()
   {
    var inputCode = document.getElementById("input1").value;
    if(inputCode.length <=0)
    {
      alert("请输入验证码！");
      document.getElementById("input1").focus();
    }
    else if(inputCode != code )
    {
     alert("验证码输入错误！");
     createCode();//刷新验证码
     inputCode = "";
     document.getElementById("input1").focus();
    }else{
      document.frmRegister.submit();
    } 

    }
<script>

接下来时如何放入到验证框里面了

<input type="text"  id="checkCode" class="unchanged" style="width: 80px"  readonly/>

接着就是判断了

<input  type="text"  onclick="createCode()" id="input1" />

OK....搞定...这里的onclik是只要动了就移开

以上就是JS 随机生成验证码的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

    废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

  • JS实现用户注册时获取短信验证码和倒计时功能

    JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • JSP实现登录功能之添加验证码

    jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.Java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i

  • JavaScript登录验证码的实现

    废话不多说,实现js登录验证码的功能需要下面两步,具体实现过程如下所示: 1.js var code="" ; //在全局 定义验证码 function createCode(){ code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); checkCode.value = ""; var selec

  • JS 实现随机验证码功能

    1.验证码 验证是网页常出现的一个验证点,所谓验证码类型有很多,下面代码只是实现一个简单的验证功能. <div> <input type = "text" id = "input" value="" /> <input type = "button" id="code" onclick="createCode()"/> <input type =

  • JavaScript生成验证码并实现验证功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <title>验证码</title> <style type="text/css"> #code { font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; } </style> <scri

  • JavaScript 随机验证码的生成实例代码

    随机验证码的生成 1: 主体部分 <script> var code ; //在全局 定义验证码 function createCode() { code = ""; var codeLength = 6;//验证码的长度 var checkCode = document.getElementById("checkCode"); var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D',

  • vue实现随机验证码功能的实例代码

    vue实现随机验证码功能的实例代码

    1.html代码 <div class="form-group" style="display: flex;"> <div> <span>验证码:</span> <input type="text" id="code" v-model="code" class="code" placeholder="请输入您的验证码&quo

  • JavaScript实现4位随机验证码的生成

    JavaScript实现4位随机验证码的生成

    本文实例为大家分享了JavaScript生成4位随机验证码的具体代码,供大家参考,具体内容如下 代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>4位随机验证码的生成</title> <style> label{ color:aqua; float:left; font-size: 20px; line-height:2em;

  • Struts2实现生成动态验证码并验证实例代码

     一.基本流程: 产生一个验证码页面(很小)→嵌入到表单中→点击可以刷新页面→表单提交时验证. 二.方法: 1.定义TestAction,实现画图方法 package com.zhuguang.action; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.util.Map; import javax.se

  • Android栗子の图片验证码生成实例代码

    废话不多说了,下面一段代码给大家分享android 生成栗子图片验证码功能,具体代码如下所示: import java.util.Random; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; public class

  • 超简洁java实现双色球若干注随机号码生成(实例代码)

    超简洁java实现双色球若干注随机号码生成(实例代码)

    Mavan pom文件引用依赖 <!-- hutool工具类--> <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.3.6</version> </dependency> <!-- google java类库--> <dependency> <

  • Ajax+Struts2实现验证码验证功能实例代码

    Ajax+Struts2实现验证码验证功能实例代码

    众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

  • Java 实现随机验证码功能简单实例

    Java 实现随机验证码功能简单实例 现在许多系统的注册.登录或者发布信息模块都添加的随机码功能,就是为了避免自动注册程序或者自动发布程序的使用. 验证码实际上就是随机选择一些字符以图片的形式展现在页面上,如果进行提交操作的同时需要将图片上的字符同时提交,如果提交的字符与服务器session保存的不同,则认为提交信息无效.为了避免自动程序分析解析图片,通常会在图片上随机生成一些干扰线或者将字符进行扭曲,增加自动识别的难度. 在这里,我们使用servlet来实现随机验证码的实现.  实现代码: p

  • Java制作验证码的完整实例代码

    JAVA代码制作验证码,可用于注册等功能页面 要导入servlet-api.jar包 创建验证码的Util工具类: 先创建图片并生成随机的验证码字母 设置图片的底色,并用setFont函数将验证码画在图片上,如果想让验证码难一点,可以添加for循环的代码给图片增加旋转角度 给验证码增加干扰线,提高安全性 设置边框 创建VerifyPic的servlet,通过Util类获取代码,并存入session中,然后输送去前端页面 前端页面验证码如下: 完整Util工具类代码如下: package com.

  • java实现随机验证码图片生成

    java实现随机验证码图片生成

    本文实例为大家分享了java生成随机验证码图片的具体代码,供大家参考,具体内容如下 1.controller /** * 获取随机数验证码图片 * * @param request HttpServletRequest * @param response HttpServletResponse */ @GetMapping(value = "/getRandomCode" ,produces = MediaType.APPLICATION_OCTET_STREAM_VALUE) pub

随机推荐