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下:float属性会影响offsetTop的取值
Dec 22 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
vue动画打包后失效问题的解决方法
Sep 18 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
解决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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
js实现微信分享代码
2020/10/11 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
vue实现单选和多选功能
2017/08/11 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python实现求特征选择的信息增益
2018/12/18 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
优秀毕业生求职信
2014/06/05 职场文书
中秋手机店促销方案
2014/06/16 职场文书
党员个人整改措施
2014/10/24 职场文书
出国留学单位推荐信
2015/03/26 职场文书
简爱读书笔记
2015/06/26 职场文书
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers