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 相关文章推荐
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue实现移动端拖动排序
Aug 21 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
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python针对excel的操作技巧
2018/03/13 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
python实现控制台输出颜色
2021/03/02 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
小小的船教学反思
2014/02/21 职场文书
端午节演讲稿
2014/05/23 职场文书
质量保证书怎么写
2015/02/27 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android