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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
基于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
Zerg基本策略
2020/03/14 星际争霸
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python中设置变量访问权限的方法
2015/04/27 Python
python导入时小括号大作用
2017/01/10 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
Python中断多重循环的思路总结
2019/10/04 Python
Python networkx包的实现
2020/02/14 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
高中的自我鉴定
2013/12/16 职场文书
原材料检验岗位职责
2014/03/15 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
证婚人致辞精选
2015/07/28 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Java使用jmeter进行压力测试
2021/07/09 Java/Android
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python