JS 实现随机验证码功能

 更新时间:2017年02月15日 15:55:31   作者:Mr丶miao  
验证码验证是网页常出现的一个验证点,所谓验证码类型有很多,下面代码只是实现一个简单的验证功能,需要的朋友参考下

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://www.jb51.net/Special/922.htm

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

相关文章

  • 微信小程序实现长按 识别图片二维码(两种方案)

    微信小程序实现长按 识别图片二维码(两种方案)

    这篇文章主要介绍了微信小程序实现长按 识别图片二维码(两种方案),第一种方案只需要在image里面加一个属性就可以了,本文结合实例代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • ES6生成器用法实例分析

    ES6生成器用法实例分析

    这篇文章主要介绍了ES6生成器用法,结合实例形式分析了ECMAScript6中生成器的概念、语法、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 关于Vue中postcss-pxtorem的使用详解

    关于Vue中postcss-pxtorem的使用详解

    在Web开发领域,响应式设计已经成为一个不可或缺的趋势,PostCSS插件——postcss-pxtorem的出现为我们提供了一种更加智能和高效的解决方案,本文将深入探讨postcss-pxtorem的使用,包括其背后的原理、配置选项、实际应用中的注意事项等方面,需要的朋友可以参考下
    2023-12-12
  • 五段实用的js高级技巧

    五段实用的js高级技巧

    五段实用的js高级技巧,一些不错的小技巧,学习js的朋友可以看看。
    2011-12-12
  • 微信小程序App生命周期详解

    微信小程序App生命周期详解

    这篇文章主要为大家详细介绍了微信小程序App生命周期的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JavaScript设计模式之代理模式详解

    JavaScript设计模式之代理模式详解

    这篇文章主要为大家详细介绍了JavaScript设计模式之代理模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 微信小程序渲染性能调优小结

    微信小程序渲染性能调优小结

    这篇文章主要介绍了微信小程序渲染性能调优,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-07-07
  • 如何使用JS在HTML中自定义字符串格式化

    如何使用JS在HTML中自定义字符串格式化

    在JavaScript中虽没有类似的方法,但我们可以利用字符串的replace方法自定义字符串的格式化方法。下面通过本文给大家分享使用JS在HTML中自定义字符串格式化的方法,需要的的朋友参考下吧
    2017-07-07
  • 前端图片压缩常见的一些解决办法

    前端图片压缩常见的一些解决办法

    这篇文章主要给大家介绍了关于前端图片压缩常见的一些解决办法,图片上传是前端中常见的的业务场景,无论是前台还是后台,适当的对图片进行压缩处理,可以显著的提升用户体验,需要的朋友可以参考下
    2023-11-11
  • 前端实现添加水印功能的常见方式小结

    前端实现添加水印功能的常见方式小结

    前端水印就是在网页或应用程序的前端界面上添加的一种标记,通常是文本、图标或图案等形式,下面小编就来和大家介绍四个常用的方法吧
    2025-03-03

最新评论