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 相关文章推荐
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
javascript动态创建链接的方法
May 13 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
VUE中使用Vue-resource完成交互
Jul 21 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
Vue中全局变量的定义和使用
Jun 05 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php排序算法实例分析
2016/10/17 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
南京某公司笔试题
2013/01/27 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
承办会议欢迎词
2014/01/17 职场文书
优秀幼教自荐信
2014/02/03 职场文书
委托书的写法
2014/09/16 职场文书
土地转让协议书
2014/09/27 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA