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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 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 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python切片知识解析
2016/03/06 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
质检部职责
2013/12/28 职场文书
Python基础之条件语句详解
2021/06/16 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android