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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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
php microtime获取浮点的时间戳
2010/02/21 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery validate demo 基础
2015/10/29 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript实现二分查找实例代码
2017/02/22 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python 编写简单网页服务器的实例
2018/06/01 Python
浅谈Django的缓存机制
2018/08/23 Python
python实现可变变量名方法详解
2019/07/01 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
员工工作表现评语
2014/04/26 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
个人求职信范文
2014/05/24 职场文书
教研处工作方案
2014/05/26 职场文书
五年级上册复习计划
2015/01/19 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers