表单/表格
前端jquery生成验证码插件
PetitQ
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
github 网址：https://github.com/AnupamKhosla/ClientSideCaptcha
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
