基于JavaScript实现验证码功能


Posted in Javascript onApril 01, 2017

本文实例为大家分享了JavaScript实现验证码的具体代码,供大家参考,具体内容如下

1、一个简单的例子
新建 test.html

<!DOCTYPE html> 
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>  
  <title>验证码</title>   
  <script src = "checkCode.js">  </script>  
</head>  
<body>  
  <div>  
    <input type = "text" id = "input"/>  
    <input type = "button" id="code" onclick="createCode()"/>  
    <input type = "button" value = "验证" onclick = "validate()"/>  
  </div>  
</body>  
</html>

新建 checkCode.js

var code ; //在全局定义验证码   
 
window.onload = function createCode(){  
   code = "";   
   var codeLength = 4;//验证码的长度  
   var checkCode = document.getElementById("code");   
   var random = 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 index = Math.floor(Math.random()*36);//取得随机数的索引(0~35)  
    code += random[index];//根据索引取得随机数加到code上  
  }  
  checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
  var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
  if(inputCode.length <= 0) { //若输入的验证码长度为0  
    alert("Empty Code!"); //则弹出请输入验证码  
  }      
  else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
    alert("Error Code"); //则弹出验证码输入错误  
    createCode();//刷新验证码  
    document.getElementById("input").value = "";//清空文本框  
  }      
  else { //输入正确时  
    alert("OK"); //弹出^-^  
  }        
}

2、点击的时候不会移动位置的代码:

<p class="red"><a href="javascript:;" rel="external nofollow" onclick="createCode()">看不清?</a></p> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
jquery自适应布局的简单实例
May 28 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 #Javascript
Angularjs使用指令做表单校验的方法
Mar 31 #Javascript
JS正则获取HTML元素的方法
Mar 31 #Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 #Javascript
ES6中Generator与异步操作实例分析
Mar 31 #Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 #Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 #Javascript
You might like
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
pycharm 激活码及使用方式的详细教程
2020/05/12 Python
解决python运行效率不高的问题
2020/07/20 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
法学专业个人求职信
2013/09/26 职场文书
应届生学校辅导员求职信
2013/11/07 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
公司财务自我评价分享
2013/12/17 职场文书
爱我中华教学反思
2014/04/28 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
五一口号
2014/06/19 职场文书
电教室标语
2014/06/20 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
学习十八大演讲稿
2014/09/15 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书