• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > JS 实现随机验证码功能

JS 实现随机验证码功能

作者:Mr丶miao 字体:[增加 减小] 来源:互联网 时间:2017-05-11

Mr丶miao通过本文主要向大家介绍了js随机生成验证码,js随机验证码,js实现随机彩色验证码,js验证码,js验证码代码等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

1、验证码 验证是网页常出现的一个验证点,所谓验证码类型有很多,下面代码只是实现一个简单的验证功能。

 <div> 
  <input type = "text" id = "input" value="" /> 
  <input type = "button" id="code" onclick="createCode()"/> 
  <input type = "button" value = "验证" onclick = "validate()"/> 
 </div> 
</div>

2、随便加点样式

 #code{ 
    font-family:Arial; 
    font-style:italic; 
    font-weight:bold; 
    border:0; 
    letter-spacing:2px; 
    color:blue; 
   }
</div>

3.JS部分,里面我已经加了详细的备注

//设置一个全局的变量,便于保存验证码
 var code;
 function createCode(){
  //首先默认code为空字符串
  code = '';
  //设置长度,这里看需求,我这里设置了4
  var codeLength = 4;
  var codeV = 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');
  //循环codeLength 我设置的4就是循环4次
  for(var i = 0; i < codeLength; i++){
   //设置随机数范围,这设置为0 ~ 36
    var index = Math.floor(Math.random()*36);
    //字符串拼接 将每次随机的字符 进行拼接
    code += random[index]; 
  }
  //将拼接好的字符串赋值给展示的Value
  codeV.value = code;
 }
 //下面就是判断是否== 的代码,无需解释
 function validate(){
  var oValue = document.getElementById('input').value.toUpperCase();
  if(oValue ==0){
   alert('请输入验证码');
  }else if(oValue != code){
   alert('验证码不正确,请重新输入');
   oValue = ' ';
   createCode();
  }else{
   window.open('http://www.baidu.com','_self');
  }
 }
 //设置此处的原因是每次进入界面展示一个随机的验证码,不设置则为空
 window.onload = function (){
  createCode();
 }
</div>

js验证码专题参考:http://www.weikejianghu.com/Special/922.htm

以上所述是小编给大家介绍的JS 实现随机验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • JS 实现随机验证码功能
  • JS验证不重复验证码

相关文章

  • 2017-08-19js Input事件
  • 2017-05-11js实现3D图片展示效果
  • 2017-05-11jQuery实现jQuery-form.js实现异步上传文件
  • 2017-05-11详解Javascript百度地图接口开发文档中的类和方法
  • 2017-05-11JS三目运算(三元运算)方法详解
  • 2017-05-11js时间戳格式化成日期格式的多种方法介绍
  • 2017-05-11JS实现线性表的链式表示方法示例【经典数据结构】
  • 2017-05-11jQuery实现滚动条滚动到子元素位置(方便定位)
  • 2017-05-11JS实现touch 点击滑动轮播实例代码
  • 2017-05-11详解AngularJS 路由 resolve用法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 原生js实现打字动画游戏
    • AngularJS学习第一篇 AngularJS基础知识
    • 微信小程序 实例开发总结
    • Angular.Js之Scope作用域的学习教程
    • JS排序之快速排序详解
    • vue2.0结合DataTable插件实现表格动态刷新的方法详解
    • JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
    • jQuery在header中设置请求信息的方法
    • 微信小程序 视图容器组件的详解及实例代码
    • JS正则替换去空格的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有