js实现随机数字字母验证码


Posted in Javascript onJune 19, 2017

本文实例为大家分享了数字字母验证码的具体实现代码,供大家参考,具体内容如下

验证码: 

js实现随机数字字母验证码

<html> 
  <head> 
    <title>纯字验证码</title> 
    <meta http-equiv='content-type' content='text/html;charset=utf-8'/> 
    <script type='text/javascript' src='jquery-1.7.2.js'></script> 
    <script type='text/javascript'> 
    var code ; //在全局定义验证码  
      
    function createCode(){ 
       code = "";  
       var codeLength = 4;//验证码的长度  
       var checkCode = 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');//随机数  
       for(var i = 0; i < codeLength; i++) {//循环操作  
        var index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)  
        code += random[index];//根据索引取得随机数加到code上  
      }  
      checkCode.value = code;//把code值赋给验证码  
    } 
    //校验验证码  
    function validate(){  
      var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
      if(inputCode.length <= 0) { //若输入的验证码长度为0  
        alert("请输入验证码!"); //则弹出请输入验证码  
      }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
        alert("验证码输入错误!@_@"); //则弹出验证码输入错误  
        createCode();//刷新验证码  
        document.getElementById("input").value = "";//清空文本框  
      }else { //输入正确时  
        alert("合格!^-^"); 
      } 
    } 
    </script> 
    <style type='text/css'> 
    #code{ 
      font-family:Arial,宋体; 
      font-style:italic; 
      color:green; 
      border:0; 
      padding:2px 3px; 
      letter-spacing:3px; 
      font-weight:bolder; 
    } 
    </style> 
  </head> 
  <body onload='createCode()'> 
    <div>验证码:  
      <input type = "text" id = "input"/>  
      <input type="button" id="code" onclick="createCode()" style="width:60px" title='点击更换验证码' /> 
      <input type = "button" value = "验证" onclick = "validate()"/> 
    </div>  
  </body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
js arguments对象应用介绍
Nov 28 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 #Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 #Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 #Javascript
AngularJS的ng-click传参的方法
Jun 19 #Javascript
JavaScript队列函数和异步执行详解
Jun 19 #Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 #Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 #Javascript
You might like
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python删除服务器文件代码示例
2018/02/09 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Django框架验证码用法实例分析
2019/05/10 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
房地产融资计划书
2014/01/10 职场文书
校园演讲稿汇总
2014/05/21 职场文书
汽修专业自荐信
2014/07/07 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
办公用房租赁协议书
2014/11/29 职场文书
英文慰问信
2015/02/14 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
Python中for后接else的语法使用
2021/05/18 Python
pytorch中的model=model.to(device)使用说明
2021/05/24 Python