Home > Article > Web Front-end > Sharing an example of jQuery implementing a simple verification code function

Sharing an example of jQuery implementing a simple verification code function

小云云Original: 2018-01-06 10:10:021445browse

This article mainly shares with you a simple verification code function based on jquery. The code is simple and easy to understand, very good, and has reference value. Friends who need it can refer to it. I hope it can help everyone.

In the process of learning jQuery, I wrote a simple small example of a verification code and recorded it for future reference. The source code is as follows:

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

Related recommendations:

How to load the verification code function that comes with Yii

JS verification code function explanation

Detailed explanation of examples of implementing verification code function using JavaScript

The above is the detailed content of Sharing an example of jQuery implementing a simple verification code function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery Form's implementation of Ajax uploading files and setting headers at the same timeNext article：Detailed explanation of jQuery Form's implementation of Ajax uploading files and setting headers at the same time

See more

Sharing an example of jQuery implementing a simple verification code function

Related articles