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驗證碼插件。
這部分內容在今日頭條排版實在頭疼就不寫了,看源碼最好,結構比較清晰。
源碼已經打包好了,想學習的朋友可以下載練習練習,你不一定會哦。點擊小編頭像,關注後私信回覆“源碼”即可下載。首先把代碼擼起來!首先把代碼擼起來!首先把代碼擼起來!重要的事說三遍,哈哈。借用某位大V的話說,“編程是門手藝活”。什麼意思?得練。