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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Node.js的特点详解
Feb 03 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
详解JS面向对象编程
2016/01/24 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
js实现随机8位验证码
2020/07/24 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
研究生自荐信
2013/10/09 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
项目投资意向书
2014/04/01 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
教育见习报告范文
2014/11/03 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
节水宣传标语口号
2015/12/26 职场文书
银行求职信范文
2019/05/13 职场文书