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的一种模块模式
Sep 08 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
React优化子组件render的使用
May 12 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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php curl选项列表(超详细)
2013/07/01 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
读jQuery之一(对象的组成)
2011/06/11 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python基础之函数用法实例详解
2014/09/10 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python 对象和json互相转换方法
2018/03/22 Python
python进行两个表格对比的方法
2018/06/27 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
解决pip install psycopg2出错问题
2020/07/09 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
2014年学校办公室工作总结
2014/12/19 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL