jQuery实现验证码功能

2019-11-19 17:07:08

字体：大中小

来源：转载

供稿：网友

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：js实现旋转木马效果

下一篇：基于vue.js轮播组件vue-awesome-swiper实现轮播图