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编程起步(第五课)
Jan 10 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
Js注册协议倒计时的小例子
Jun 24 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
解决webpack -p压缩打包react报语法错误的方法
Jul 03 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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的十大要点(上)
2009/02/04 PHP
CI框架中zip类应用示例
2014/06/17 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
js css样式操作代码(批量操作)
2009/10/09 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
jQuery zTree插件使用简单教程
2019/08/16 jQuery
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python实现给数组按片赋值的方法
2015/07/28 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python爬取成语接龙类网站
2018/10/19 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
建筑管理专业求职信
2014/07/28 职场文书
法定代表人身份证明书
2014/09/10 职场文书
捐书仪式主持词
2015/07/04 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
Go语言编译原理之变量捕获
2022/08/05 Golang