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 相关文章推荐
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
vue-cli常用设置总结
Feb 24 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
Vue-cli3多页面配置详解
Mar 22 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
简单的页面缓冲技术
2006/10/09 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
python多线程http下载实现示例
2013/12/30 Python
python概率计算器实例分析
2015/03/25 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
python实现自动登录后台管理系统
2018/10/18 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
学习全国两会精神心得体会范文
2014/03/17 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
文明班级申报材料
2014/12/24 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
MySQL创建定时任务
2022/01/22 MySQL
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
Python如何将list中的string转换为int
2022/07/15 Ruby