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


Posted in Javascript onSeptember 17, 2014

分享给大家一段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的,那就是在客户端处验证,基本等于没有一样!!!最好是服务器生成,客户端验证,服务器确认,正常浏览。这样一个流程就万无一失

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

Javascript 相关文章推荐
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
JS实现购物车基本功能
Nov 08 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 #Javascript
node.js中使用q.js实现api的promise化
Sep 17 #Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 #Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 #Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 #Javascript
JavaScript的各种常见函数定义方法
Sep 16 #Javascript
JavaScript中合并数组的N种方法
Sep 16 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python制作最美应用的爬虫
2015/10/28 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python爬取51job中hr的邮箱
2016/05/14 Python
详谈python http长连接客户端
2017/06/12 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
小学数学教学随笔
2015/08/14 职场文书
创业计划书之甜品店
2019/09/18 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
通过Python把学姐照片做成拼图游戏
2022/02/15 Python