JS 实现随机验证码功能

1、验证码 验证是网页常出现的一个验证点，所谓验证码类型有很多，下面代码只是实现一个简单的验证功能。

 <div>
  <input type = "text" id = "input" value="" />
  <input type = "button" id="code" onclick="createCode()"/>
  <input type = "button" value = "验证" onclick = "validate()"/>
 </div>

2、随便加点样式

 #code{
    font-family:Arial;
    font-style:italic;
    font-weight:bold;
    border:0;
    letter-spacing:2px;
    color:blue;
   }

3.JS部分，里面我已经加了详细的备注

//设置一个全局的变量，便于保存验证码
 var code;
 function createCode(){
  //首先默认code为空字符串
  code = '';
  //设置长度，这里看需求，我这里设置了4
  var codeLength = 4;
  var codeV = document.getElementById('code');
  //设置随机字符
  var random = 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');
  //循环codeLength 我设置的4就是循环4次
  for(var i = 0; i < codeLength; i++){
   //设置随机数范围,这设置为0 ~ 36
    var index = Math.floor(Math.random()*36);
    //字符串拼接 将每次随机的字符 进行拼接
    code += random[index];
  }
  //将拼接好的字符串赋值给展示的Value
  codeV.value = code;
 }
 //下面就是判断是否== 的代码，无需解释
 function validate(){
  var oValue = document.getElementById('input').value.toUpperCase();
  if(oValue ==0){
   alert('请输入验证码');
  }else if(oValue != code){
   alert('验证码不正确，请重新输入');
   oValue = ' ';
   createCode();
  }else{
   window.open('http://www.baidu.com','_self');
  }
 }
 //设置此处的原因是每次进入界面展示一个随机的验证码，不设置则为空
 window.onload = function (){
  createCode();
 }

js验证码专题参考：http://www.jb51.net/Special/922.htm

以上所述是小编给大家介绍的JS 实现随机验证码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

  • JavaScript登录验证码的实现

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

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

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

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

  • 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

  • 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 随机验证码的生成实例代码

    随机验证码的生成 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',

  • JS 实现随机验证码功能

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

  • 纯JS实现图片验证码功能并兼容IE6-8(推荐)

    纯JS实现图片验证码功能并兼容IE6-8(推荐)

    最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也是醉了.万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识.下面看我是如何搞定它的,虽然花了一点时间,不过也值得. 使用方法 使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID

  • 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

  • vue实现随机验证码功能(完整代码)

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

  • JS实现图片验证码功能

    JS实现图片验证码功能

    本文实例为大家分享了JS实现图片验证码功能的具体代码,供大家参考,具体内容如下 以下代码可以直接copy运行,不需要引入jquery.jar 1. html代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="

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

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

  • Android 获取随机验证码功能示例

    验证码功能在各大网站都能用到,下面小编通过实例代码给大家分享Android 获取随机验证码功能,具体代码如下所示: package cn.hk.image; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.IOException; impo

  • Vue实现随机验证码功能

    本文实例为大家分享了Vue实现随机验证码功能的具体代码,供大家参考,具体内容如下 步骤1:创建一个名为identify.vue的子组件 <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div>

  • Java案例之随机验证码功能实现实例

    Java案例之随机验证码功能实现实例

    实现的功能比较简单,就是随机产生了四个字符然后输出.效果图如下,下面我会详细说一下实现这个功能用到了那些知识点,并且会把 这些知识点详细的介绍出来.哈哈 ,大神勿喷,对于初学Java的人帮助应该蛮大的.嘿嘿. 先上效果图: 源代码: RandomGen.java(实现产生验证码功能的类) package verificationcode; import java.util.Random; public class RandomGen { //生成四位不重复的验证码 public static S

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

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

随机推荐