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 相关文章推荐
jQuery 获取对象 定位子对象
May 31 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 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 时间计算问题小结
2009/01/04 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
运动会通讯稿50字
2014/01/30 职场文书
公司委托书格式范文
2014/10/09 职场文书
介绍信格式样本
2015/05/05 职场文书
关于分班的感言
2015/08/04 职场文书
Python实现简单的猜单词
2021/06/15 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python