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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
详解微信UnionID作用
May 15 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php中this关键字用法分析
2016/12/07 PHP
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python中subprocess的简单使用示例
2015/07/28 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python中的tcp示例详解
2018/12/09 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python collections模块的使用方法
2020/10/09 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
期中考试后的反思
2014/02/08 职场文书
座谈会主持词
2014/03/20 职场文书
平安工地建设方案
2014/05/06 职场文书
司机岗位职责说明书
2014/07/29 职场文书
医院见习报告范文
2014/11/03 职场文书
2014年工商所工作总结
2014/12/09 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
个人年度总结报告
2015/03/09 职场文书
农村党支部承诺书
2015/04/30 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2016年教师节慰问信
2015/12/01 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android