jQuery实现验证码功能


Posted in Javascript onMarch 17, 2017

效果图:

jQuery实现验证码功能

代码如下:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #code{
 width:80px;
 height:30px;
 font-size:20px;
 font-family:Arial; 
 font-style:italic; 
 font-weight:bold; 
 border:0; 
 letter-spacing:2px; 
 color:blue; 
 }
 </style>
 </head>
 <body>
<div> 
 <input type = "text" id = "input"/> 
 <input type = "button" id="code" /> 
 <input type = "button" value = "验证" id="check"/> 
   </div> 
 <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
  function change(){
    code=$("#code");
  // 验证码组成库
   var arrays=new Array( 
       '1','2','3','4','5','6','7','8','9','0',
       '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', 
       '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'        
       ); 
    codes='';// 重新初始化验证码
   for(var i = 0; i<4; i++){
   // 随机获取一个数组的下标
   var r = parseInt(Math.random()*arrays.length);
   codes += arrays[r];
  }
  // 验证码添加到input里
     code.val(codes);
  }
  change();
 code.click(change);
 //单击验证
  $("#check").click(function(){
   var inputCode = $("#input").val().toUpperCase(); //取得输入的验证码并转化为大写 
   console.log(inputCode);
  if(inputCode.length == 0) { //若输入的验证码长度为0
   alert("请输入验证码!"); //则弹出请输入验证码
  }    
  else if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
   alert("验证码输入错误!请重新输入"); //则弹出验证码输入错误
   change();//刷新验证码
   $("#input").val("");//清空文本框
  }else { //输入正确时
   alert("正确"); //弹出^-^
  } 
  });
</script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 #Javascript
node操作mysql数据库实例详解
Mar 17 #Javascript
vue.js从安装到搭建过程详解
Mar 17 #Javascript
超简单的Vue.js环境搭建教程
Mar 17 #Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
原生js编写2048小游戏
Mar 17 #Javascript
vue.js开发环境安装教程
Mar 17 #Javascript
You might like
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python查找第k小元素代码分享
2013/12/18 Python
python提取内容关键词的方法
2015/03/16 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
学生个人自我鉴定
2014/03/26 职场文书
2014年人事科工作总结
2014/11/19 职场文书
质量负责人岗位职责
2015/02/15 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang