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的trim方法
Oct 09 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 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
一个简易需要注册的留言版程序
2006/10/09 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
javascript 常用功能总结
2012/03/18 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
python中异常报错处理方法汇总
2016/11/20 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python实现剪切功能
2019/01/23 Python
python 调用钉钉机器人的方法
2019/02/20 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
致裁判员加油稿
2014/02/08 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
大型公益活动策划方案
2014/08/20 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
总结Python常用的魔法方法
2021/05/25 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript