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中的var_dump函数实现代码
Sep 07 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
js生成随机数的方法实例
Oct 16 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
JavaScript 异步时序问题
Nov 20 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使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python 内置函数汇总详解
2019/09/16 Python
appium+python adb常用命令分享
2020/03/06 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
会计顶岗实习心得
2014/01/25 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2014年卫生工作总结
2014/11/27 职场文书
公务员政审材料
2014/12/23 职场文书
成绩单评语
2015/01/04 职场文书
大学生个人学习总结
2015/02/15 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
总结会主持词
2015/07/02 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
matlab xlabel位置的设置方式
2021/05/21 Python
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android