Maison >interface Web >js tutoriel >Exemple de partage de l'implémentation jQuery de la fonction de code de vérification

Exemple de partage de l'implémentation jQuery de la fonction de code de vérification

小云云original: 2018-01-22 13:03:212164parcourir

De nombreux langages de programmation peuvent implémenter la fonction de code de vérification. Cet article présente principalement l'exemple de code de jQuery pour implémenter la fonction de code de vérification, qui a une bonne valeur de référence, je l'espère. cela peut aider tout le monde.

Rendu :

Le code est le suivant :

<!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>
<p> 
 <input type = "text" id = "input"/> 
 <input type = "button" id="code" /> 
 <input type = "button" value = "验证" id="check"/> 
   </p> 
 <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( 
       &#39;1&#39;,&#39;2&#39;,&#39;3&#39;,&#39;4&#39;,&#39;5&#39;,&#39;6&#39;,&#39;7&#39;,&#39;8&#39;,&#39;9&#39;,&#39;0&#39;,
       &#39;a&#39;,&#39;b&#39;,&#39;c&#39;,&#39;d&#39;,&#39;e&#39;,&#39;f&#39;,&#39;g&#39;,&#39;h&#39;,&#39;i&#39;,&#39;j&#39;, 
       &#39;k&#39;,&#39;l&#39;,&#39;m&#39;,&#39;n&#39;,&#39;o&#39;,&#39;p&#39;,&#39;q&#39;,&#39;r&#39;,&#39;s&#39;,&#39;t&#39;, 
       &#39;u&#39;,&#39;v&#39;,&#39;w&#39;,&#39;x&#39;,&#39;y&#39;,&#39;z&#39;, 
       &#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,&#39;H&#39;,&#39;I&#39;,&#39;J&#39;, 
       &#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,&#39;S&#39;,&#39;T&#39;, 
       &#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,&#39;Z&#39;        
       ); 
    codes=&#39;&#39;;// 重新初始化验证码
   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>

Recommandations associées :

JQuery implémente un partage d'exemple de fonction de code de vérification simple

Pure JS implémente la vérification d'image code Fonction (compatible avec IE6-8) code

Utilisation de php pour implémenter le code de vérification du site Web explication détaillée du code de fonction

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la copie et du fractionnement des valeurs des données de table dans jQueryArticle suivant：Explication détaillée de la copie et du fractionnement des valeurs des données de table dans jQuery

Articles Liés

Voir plus