脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js生成的验证码

js生成的验证码的实现与技术分析

 更新时间：2014年09月17日 09:59:28   投稿：hebedich  
本文主要是分享了一段由JS生成验证码并验证的代码，非常简单，并分析了此方法的实用性，提供给大家参考下

分享给大家一段js生成验证码并验证的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS生成验证码</title>
<style type="text/css">
.code {
background-image: url(code.jpg);
font-family: Arial;
font-style: italic;
color: Red;
border: 0;
padding: 2px 3px;
letter-spacing: 3px;
font-weight: bolder;
}
.unchanged {
border: 0;
}
</style>
<script language="javascript" type="text/javascript"> 
var code; //在全局 定义验证码  
function createCode() {
  code = "";
  var codeLength = 6;//验证码的长度  
  var checkCode = document.getElementById("checkCode");
  var selectChar = 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');//所有候选组成验证码的字符，当然也可以用中文的  
 
  for (var i = 0; i < codeLength; i++) {
    var charIndex = Math.floor(Math.random() * 36);
    code += selectChar[charIndex];
  }
  //alert(code);
  if (checkCode) {
    checkCode.className = "code";
    checkCode.value = code;
  }
}
 
function validate() {
  var inputCode = document.getElementById("input1").value;
  if (inputCode.length <= 0) {
    alert("请输入验证码！");
  } else if (inputCode != code) {
    alert("验证码输入错误！");
  createCode();//刷新验证码  
  } else {
  alert("^-^ OK");
  }
}
</script>
</head>
<body onload="createCode()">
<form action="#">
  <input type="text" id="input1" /> <input type="text" onclick="createCode()" readonly="readonly" id="checkCode" class="unchanged" style="width: 80px" /><br />
  <input id="Button1" onclick="validate();" type="button" value="确定" />
</form>
</body>
</html>

众所周知，js是客户端的，那么把验证都做在客户端有意义吗？还是必须从服务器生成的验证码安全啊？前端生成的验证码安全吗？

验证码是动态的，但要由客户端识别，并返回正确数值才能正常验证。这是一个流程问题，如果js的，那就是在客户端处验证，基本等于没有一样！！！最好是服务器生成，客户端验证，服务器确认，正常浏览。这样一个流程就万无一失

所以，本文仅仅是技术探讨而已，千万别用在实际生产项目中

您可能感兴趣的文章:

相关文章

  • Vue3中使用typescript封装axios的实例详解

    Vue3中使用typescript封装axios的实例详解

    这篇文章主要介绍了使用typescript封装axios的实例代码，为了方便，在vue3的配置里面按需加载element-plus，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-10-10
  • javascript的currying函数介绍

    javascript的currying函数介绍

    curring的概念将函数式编程的概念和默认参数以及可变参数结合在一起.一个带n个参数,curried的函数固化第一个参数为固定参数,并返回另一个带n-1个参数的函数对象,分别类似于LISP的原始函数car和cdr的行为。currying能泛化为偏函数应用（partial function application, PFA）,p 这种函数将任意数量（顺序）的参数的函数转化为另一个带剩余参数的函数对象
    2012-02-02
  • 微信小程序实现滚动条功能

    微信小程序实现滚动条功能

    这篇文章主要为大家详细介绍了微信小程序实现滚动条功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JavaScript实现邮箱后缀提示功能的示例代码

    JavaScript实现邮箱后缀提示功能的示例代码

    这篇文章主要介绍了JavaScript实现邮箱后缀提示功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • JavaScript中常见的数据格式化方式详解

    JavaScript中常见的数据格式化方式详解

    这篇文章主要为大家详细介绍了JavaScript中常见的数据格式化方式,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2023-12-12
  • JS之Date对象和获取系统当前时间详解

    JS之Date对象和获取系统当前时间详解

    本篇文章主要是对JS之Date对象和获取系统当前时间进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • 详解es6新增数组方法简便了哪些操作

    详解es6新增数组方法简便了哪些操作

    这篇文章主要介绍了详解es6新增数组方法简便了哪些操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • javaScript中slice函数用法实例分析

    javaScript中slice函数用法实例分析

    这篇文章主要介绍了javaScript中slice函数用法,较为详细的分析了javascript中slice函数的功能、定义及使用方法,需要的朋友可以参考下
    2015-06-06
  • javascript和php使用ajax通信传递JSON的实例

    javascript和php使用ajax通信传递JSON的实例

    今天小编就为大家分享一篇javascript和php使用ajax通信传递JSON的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • javascript 多种搜索引擎集成的页面实现代码

    javascript 多种搜索引擎集成的页面实现代码

    这个页面是为了方便自己同时使用多种搜索引擎（呵呵我用其作默认主页），在IE5/IE6/FireFox下均运行正常，效果如下图
    2010-01-01

最新评论