Partager un exemple de jQuery implémentant une fonction de code de vérification simple-js tutoriel-php.cn

Partager un exemple de jQuery implémentant une fonction de code de vérification simple

小云云

Libérer： 2018-01-06 10:10:02

original

1509 Les gens l'ont consulté

Cet article partage principalement avec vous une fonction de code de vérification simple basée sur jquery. Le code est simple et facile à comprendre, très bon et a une valeur de référence. J'espère qu'il pourra aider tout le monde. .

Dans le processus d'apprentissage de jQuery, j'ai écrit un exemple simple de code de vérification que je l'ai enregistré pour référence future :

<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
  <style type="text/css"> 
  p{ 
    background-color:blue; 
    width:200px; 
    height:100px; 
    font-size:35px; 
  } 
  </style> 
  <script src="../jquery-1.8.0.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    $(document).ready(function() { 
       //我写的验证码 
      //验证码 
      var code; 
      function createCode(){ 
        code = &#39;&#39;;//首先默认code为空字符串 
        var codeLength = 4;//设置长度，这里看需求，我这里设置了4 
        var codeV = $("p"); 
        //设置随机字符 
        var random = new Array(0,1,2,3,4,5,6,7,8,9,&#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;); 
        for(var i = 0; i < codeLength; i++){ //循环codeLength 我设置的4就是循环4次   
           var index = Math.floor(Math.random()*36); //设置随机数范围,这设置为0 ~ 36  
           code += random[index]; //字符串拼接 将每次随机的字符 进行拼接 
      } 
        codeV.text(code);//将拼接好的字符串赋值给展示的Value 
      } 
      //页面开始加载验证码 
      createCode(); 
      //验证码p加载点击事件 
      $("p").bind(&#39;click&#39;,function() { 
          createCode(); 
        }); 
      //下面就是判断是否==的代码，无需解释 
      $("#b1").bind(&#39;click&#39;,function() { 
         var oValue = $("#in1").val().toUpperCase(); 
         $("#l1").html(""); 
        if(oValue ==""){ 
          $("#l1").html("<font color=&#39;red&#39;>请输入验证码</font>"); 
        }else if(oValue != code){ 
          $("#l1").html("<font color=&#39;red&#39;>验证码不正确，请重新输入</font>"); 
          oValue = ""; 
          createCode(); 
        }else{ 
          $("#l1").html("<font color=&#39;blue&#39;>验证码正确</font>"); 
        } 
      });  
    }); 
  </script> 
</head> 
<body> 
<center> 
<label >请输入验证码：</label><input type="text" id="in1" value="" placeholder="请输入验证码"> 
<button id="b1">点击验证</button> 
  <p></p><label id="l1"></label> 
</center> 
</body> 
</html>

Copier après la connexion

<.>

Recommandations associées :

Comment charger la fonction de code de vérification fournie avec Yii

Explication de la fonction de code de vérification JS

Explication détaillée des exemples d'implémentation de la fonction de code de vérification utilisant JavaScript

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!