Easy Alphanumeric Captcha Plugin With jQuery - captcha-lgh.js

captcha-lgh.js is a simple captcha plugin that creates a canvas-based alphanumeric captcha widget to test if your visitor is a bot or a human.

The alphanumeric captcha generates a random text string consist of letters and numbers and automatically refreshes itself on click or the input is invalid.

How to use it:

1. Put the JavaScript jquery-captcha.min.js after loading jQuery library but before the closing body tag.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/jquery-captcha.min.js"></script>

2. Create a canvas element on which you want to render the alphanumeric captcha.

<canvas id="canvas"></canvas>

3. Create an input field to accpet the code (alphanumeric characters).

<input name="code" />

4. Create a submit button to test if the code is valid.

<button id="valid">Test</button>

5. Initialize the plugin to activate the captch widget.

const captcha = new Captcha($('#canvas'));

6. Enable the submit button to test if the code your vistor typed is correct.

$('#valid').on('click', function() {
  const ans = captcha.valid($('input[name="code"]').val());
  console.log(ans);
})

7. Determine the length of alphanumeric characters to be generated. Default: 4.

const captcha = new Captcha($('#canvas'),{
      length: 6
});

8. Determine whether to refresh the captcha after testing. Default: true.

const captcha = new Captcha($('#canvas'),{
      autoRefresh: false
});

9. Determine if is casesensitive. Default: false.

const captcha = new Captcha($('#canvas'),{
      caseSensitive: true
});

10. More configurations.

const captcha = new Captcha($('#canvas'),{
      width: 100,
      height: 40,
      font: 'bold 23px Arial',
      resourceType: 'aA0', // a-lowercase letters, A-uppercase letter, 0-numbers
      resourceExtra: [],
      clickRefresh: true,
});

11. API methods.

// refresh
captcha.refresh();

// get the code
captcha.getCode();

// test if the code is correct
captcha.valid("");

Changelog:

2021-01-29

• Added more options

---

This awesome jQuery plugin is developed by honguangli. For more Advanced Usages, please check the demo page or visit the official website.