ClientSideCaptcha是一款前端jquery生成验证码插件。该验证码插件完全由js生成。通过该插件，可以不依赖于后台，在前端完成验证码的测试工作。

使用方法

在页面中引入jquery和client_captcha.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/client_captcha.js"></script>
                

HTML结构

一个完整的图片验证码的HTML结构如下：

<div class="captcha-chat">
      <div class="captcha-container media">
          <div class="media-body">
              <p class="security">请输入验证码：</p>                
          </div>
          <div id="captcha">
              <div class="controls">
                  <input class="user-text btn-common" placeholder="输入验证码" type="text" />
                  <button class="validate btn-common">
                      <!-- this image should be converted into inline svg -->
                      <img src="img/enter_icon.png" alt="submit icon">
                  </button>
                  <button class="refresh btn-common">
                      <!-- this image should be converted into inline svg -->
                      <img src="img/refresh_icon.png" alt="refresh icon">
                  </button>
              </div>
          </div>
          <p class="wrong info">输入错误，请重试！</p>
      </div>
  </div>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery验证码插件。

var captcha = new $.Captcha({ //initialize captcha  
    selector: "#captcha",  
    text: null,  
    randomText: true,  
    randomColours: true,  
    width: 244,  
    height: 163,  
    colour1: null,  
    colour2: null,  
    font: 'normal 40px "Comic Sans MS", cursive, sans-serif',  
    onFailure: function() {  
       alert("Failure!");  
    },  
    onSuccess: function() {  
       alert("验证码输入成功！");
    }  
});  
captcha.generate(); //Generate or refresh captcha
captcha.validate(); //validate filled captcha                  
                

该前端jquery生成验证码插件的github网址为：https://github.com/AnupamKhosla/ClientSideCaptcha

在线预览    源码下载