脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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的，那就是在客户端处验证，基本等于没有一样！！！最好是服务器生成，客户端验证，服务器确认，正常浏览。这样一个流程就万无一失

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

您可能感兴趣的文章:

相关文章

  • js动态设置div的值下例子

    js动态设置div的值下例子

    设置div的值想必大家都会吧，按要说动态设置想必知道的人及寥寥无几了，下面有个不错的示例，希望对大家有所帮助
    2013-10-10
  • Javascript创建自定义对象 创建Object实例添加属性和方法

    Javascript创建自定义对象 创建Object实例添加属性和方法

    创建自定义对象的最简单的方式就是创建一个Object实例，然后再为它添加属性和方法
    2012-06-06
  • p5.js入门教程之平滑过渡(Easing)

    p5.js入门教程之平滑过渡(Easing)

    本篇文章主要介绍了p5.js入门教程之平滑过渡(Easing)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • JS模仿编辑器实时改变文本框宽度和高度大小的方法

    JS模仿编辑器实时改变文本框宽度和高度大小的方法

    这篇文章主要介绍了JS模仿编辑器实时改变文本框宽度和高度大小的方法,涉及javascript鼠标事件及页面元素样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • js中如何对嵌套数组进行filter过滤

    js中如何对嵌套数组进行filter过滤

    这篇文章主要介绍了js中如何对嵌套数组进行filter过滤问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • JavaScript数组和循环详解

    JavaScript数组和循环详解

    这篇文章主要介绍了JavaScript数组和循环详解,本文讲解了循环遍历数组、按顺序存储和访问值、以相反的顺序存储和访问值、在数组中搜索等内容,需要的朋友可以参考下
    2015-04-04
  • JavaScript具有类似Lambda表达式编程能力的代码(改进版)

    JavaScript具有类似Lambda表达式编程能力的代码(改进版)

    在之前的一篇博文中我介绍了一种方法可以让JavaScript具有一种近似于Lambda表达式的编程能力——但是它有一些缺点，其中妨碍它的使用的最主要的一条就是多了一层括号，让代码变得难以阅读。
    2010-09-09
  • IE6/7/8中Option元素未设value时Select将获取空字符串

    IE6/7/8中Option元素未设value时Select将获取空字符串

    可以看到当忘记写option的value时这些现代浏览器都会尽量返回正确的（客户端程序员想要的）结果value，其容错性比IE6/7/8做的更好。
    2011-04-04
  • JavaScript 动态改变图片大小

    JavaScript 动态改变图片大小

    本文作者通实际操作，发现可以用Javascript代码简单实现：对于图片大于100 X 100，则将其缩小为 100 X 100，若比这个小，则保持原图大小。
    2009-06-06
  • javascript中html字符串转化为jquery dom对象的方法

    javascript中html字符串转化为jquery dom对象的方法

    最近项目需求要开发百度地图相关的一个应用，需要从硬编码的html字符串中提取自己想要的元素以及属性信息，由于在js中或者jq中操作元素节点以及属性都是使用dom对象或者jq对象。下面介绍javascript中html字符串转化为jquery dom对象的方法，需要的朋友可以参考下
    2015-08-08

最新评论