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方法和技巧大全
Dec 27 Javascript
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
如何封装Vue Element的table表格组件
Feb 06 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
聊天室php&amp;mysql(六)
2006/10/09 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP检测用户语言的方法
2015/06/15 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
django+echart数据动态显示的例子
2019/08/12 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Django框架模板用法入门教程
2019/11/04 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python 字符串池化的前提
2020/07/03 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
校园活动策划书范文
2014/01/10 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
电钳工人个人求职信
2014/05/10 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书