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 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
Jan 14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
js中的数组对象排序分析
Dec 11 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
使用PHP批量生成随机用户名
2008/07/10 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
jQuery 操作XML入门
2008/12/25 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
演讲稿怎么写
2014/01/07 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
安全伴我行主题班会
2015/08/13 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python