JS 实现随机验证码功能


Posted in Javascript onFebruary 15, 2017

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

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

2、随便加点样式

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

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();
 }

js验证码专题参考:https://3water.com/Special/922.htm

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

Javascript 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
javascript中apply/call和bind的使用
Feb 15 #Javascript
JS实现图片放大缩小的方法
Feb 15 #Javascript
JavaScript中的编码和解码函数
Feb 15 #Javascript
js date 格式化
Feb 15 #Javascript
JS实现最简单的冒泡排序算法
Feb 15 #Javascript
You might like
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
利用python获得时间的实例说明
2013/03/25 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python实现密码强度校验
2020/03/18 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
建筑工程管理专业自荐信范文
2013/12/28 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技