原生js实现数字字母混合验证码的简单实例

本文实例讲述了原生js实现数字字母混合验证码的全部代码,重点是注释很详细,便于大家理解,特分享给大家供大家参考。具体如下:
运行效果截图如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <title></title>
  <style type="text/css">
    body, div {
      margin: 0;
      padding: 0;
      font-size: 18px;
      font-family: "微软雅黑";
      -webkit-user-selelct: none;
    }

    #code {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -50px;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #ff0000;
      cursor: pointer;
      letter-spacing: 5px;
    }
  </style>
</head>
<body>
<div id="code">
  xdF2
</div>
<script type="text/javascript">
  //当前验证码获取的随即范围
  var codeStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  //思想:0-61索引 只需要随机生成4个索引,然后charAt可以获取随机4个索引。
  var oDiv = document.getElementById("code");

  function getRandom(n, m) {
    n = Number(n);       //转换n,m,结果不是数字就是NaN
    m = Number(m);
    if (isNaN(n) || isNaN(m)) {     //判断n,m,是不是有效数字,如果n或m其中一个传入的不是数字
      return Math.random();      //返回 【0-1)之间的随机小数
    }
    if (n > m) {             //如果n大于m,则交换位置
      var temp = n;
      n = m;
      m = temp;
    }
    return Math.round(Math.random() * (m - n) + n);          //返回,取m,n之间的随机整数。
  }

  function getCode() {
    var str = "";        //定义一个空字符串备用
    for (var i = 0; i < 4; i++) {    //遍历4个索引
      var ran = getRandom(0, 61);      //调用getRandom方法,随机获取一个索引0-61里的随机索引
      str += codeStr.charAt(ran);      //把codeStr字符串里,我们指定获取ran(这个4个索引);
    }
    oDiv.innerHTML = str;       //呈现在页面上
  }

  getCode();              //调用方法

  oDiv.onclick = function () {
    getCode();
  }
</script>
</body>
</html>
时间: 2015-12-08

jquery禁止输入数字以外的字符的示例(纯数字验证码)

纯数字验证码的时候用到的,整理如下: 复制代码 代码如下: $('#mobile-vcode').unbind();$("#mobile-vcode").bind("keyup change",function () {    $(this).val($(this).val().replace(/\D/g,''));    if($(this).val().length==4){        /*ajax检测验证码是否正确,正确则激活按钮*/    }});

支持中文字母数字、自定义字体php验证码代码

复制代码 代码如下: <?php /* * Captcha Class base on PHP GD Lib * @author Design * @version 1.0 * @demo * include('captchaClass.php'); * $captchaDemo=new Captcha(); * $captchaDemo->createImage(); */ class Captcha{ //@定义验证码图片高度 private $height; //@定义验证码图片宽度 p

asp.net下生成英文字符数字验证码的代码

复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; usi

php生成4位数字验证码的实现代码

在php中实现验证码还是很方便的,关键点在于掌握php gd库与session的用法. 纵观网上php 生成验证码的例子,无不是php gd库与session相结合,并利用php 生成随机数的方法来完成. PHP验证码,可以分为很多种,包括 php 图片验证码,php 随机验证码,以及php 中文验证码等,根据不同的应用场合来使用不同的验证码. 这里分享一个php数字验证码,供大家参考. 4位数字验证码 /* *Filename:authpage.php */ session_start();

个人写的PHP验证码生成类分享

此验证码类直接拿去就可以用,也可以参考! 其中类成员codestr是生成的验证码字符串: <?php /** * 验证码 */ class Code{ // 1. 定义各个成员 有宽.高.画布.字数.类型.画类型 private $width; //宽度 private $height; //高度 private $num; //验证码字数 private $imgType; //生成图片类型 private $Type; //字串类型 1,2,3 三个选项 1 纯数字 2 纯小写字母 3 大小

c#实现识别图片上的验证码数字

public void imgdo(Bitmap img) { //去色 Bitmap btp = img; Color c = new Color(); int rr, gg, bb; for (int i = 0; i < btp.Width; i++) { for (int j = 0; j < btp.Height; j++) { //取图片当前的像素点 c = btp.GetPixel(i, j); rr = c.R; gg = c.G; bb = c.B; //改变颜色 if (r

javascript实现数字验证码的简单实例

实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

写一个含数字,拼音,汉字的验证码生成类

本次和大家分享的是一个集成1:小写拼音 2:大写拼音 3:数字 4:汉字的验证码生成类,从标题来看感觉很普通的样子,没错的确很普通,只是这个验证码类生成的时候可以通过参数指定验证码返回格式的规则,更主要的是希望能给大家带来一定的实用性,本章例子也会有一个mvc使用验证码校验的场景,希望大家能够喜欢. » 验证码生成流程图 » 验证码生成池代码的解析 » 把验证代码画到图片上 » mvc登录操作测试验证码正确性 下面一步一个脚印的来分享: » 验证码生成流程图 首先,咋们来看一下本次分享的验证码生

asp.net生成验证码(纯数字)

CheckCode.cs 复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.Html

php中文字母数字验证码实现代码

英文同数字 <?php Header("Content-type:image/png"); //定义header,声明图片文件,最好是png,无版权之扰;  //生成新的四位整数验证码 session_start();//开启session; $authnum_session = '';  $str = 'abcdefghijkmnpqrstuvwxyz1234567890';  //定义用来显示在图片上的数字和字母; $l = strlen($str); //得到字串的长度; 

win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码

链接:https://pan.baidu.com/s/1l2yiba7ZTPUTf41ZnJ4PYw 提取码:t3bq win10安装tesserocr 首先需要下载tesseract,它为tesserocr提供底层支持.具体下载官方路径:https://github.com/UB-Mannheim/tesseract/wiki,选择对应的系统版本,可以选择一个相对不带dev的稳定版本下载,如:tesseract-ocr-setup-3.05.02-20180621.exe.然后一路安装,唯一记

JS验证逗号隔开可以是中文字母数字

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> var refid='dasdasd,dadsad'; var reg =/^([\u0391-\uFFE5\d\w,])*([\u0391-\uFFE5\d\w]+)$/; if(refid != "") { if(reg.exec(refid)) { alert('验证通过'); }else { alert('验证失败'); } }

Android判断字符串中是否含字母、中文或数字

Android 中文俗称安卓或安致,是一个以Linux为基础的开放源代码移动操作系统,主要用于智能手机和平板电脑,由Google成立的Open Handset Alliance(OHA,开放手持设备联盟)持续领导与开发中.目前Google发布Android的最新正式版本为Android 6.0"Marshmallow". Android系统最初由安迪·鲁宾(Andy Rubin)等人开发制作,最初开发这个系统的目的是创建一个数码相机的先进操作系统:但是后来发现市场需求不够大,加上智能手

PHP实现随机数字、字母的验证码功能

可自定义生成验证码文字的大小.数量.干扰项等等,也可以自定义验证文字的字体... 废话不多说,直接上代码: 1.classgd.class.php <?php Class Captcha{ private $_fontfile=''; private $_size=36; private $_width=200; private $_height=100; private $_length=4; private $_image=null; private $_snow=0; private $_

php+正则将字符串中的字母数字和中文分割

如:$str="php如何将字 符串中322的字母数字sf f45d和中文_分割?";按数字或字母分割. 复制代码 代码如下: $str = "php如何将字 符串中322的字母数字Asf f45d和中文_分割?";$arr = preg_split("/([a-zA-Z0-9]+)/", $str, 0, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);  print_r($arr); 结果 复制