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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实现tab切换效果实例
Sep 16 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
Vue函数式组件的应用实例详解
Aug 30 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 define的第二个参数使用方法
2013/11/04 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
django站点管理详解
2017/12/12 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
总经理职责范文
2013/11/08 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
普通党员个人整改措施
2014/10/27 职场文书
求职信范文怎么写
2015/03/19 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
Python matplotlib多个子图绘制整合
2022/04/13 Python
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers