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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
用JS实现简单的登录验证功能
Jul 28 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
js实现省级联动(数据结构优化)
Jul 17 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中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
JS中的多态实例详解
2017/10/15 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
Python实现FLV视频拼接功能
2020/01/21 Python
python热力图实现简单方法
2021/01/29 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
物理课外活动总结
2014/08/27 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
介绍信怎么写
2015/01/30 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
HttpClient实现文件上传功能
2022/08/14 Java/Android