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 相关文章推荐
getElementByIdx_x js自定义getElementById函数
Jan 24 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
js本地图片预览实现代码
Oct 09 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 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环境――Appserv
2006/12/13 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
远程调用的原理
2014/07/05 面试题
搞笑获奖感言
2014/01/30 职场文书
小学生家长评语大全
2014/02/10 职场文书
工作作风承诺书
2014/08/30 职场文书
大学生助学金感谢信
2015/01/21 职场文书
党员个人承诺书
2015/04/27 职场文书
光荣之路观后感
2015/06/12 职场文书
宪法宣传标语100条
2019/10/15 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers