使用純JavaScript或者jquery插件實現各種驗證碼總結

使用純JavaScript或者jquery插件實現各種驗證碼總結

  驗證碼的實現形式和表現方式多種多樣,靜態的,動態生成的,數字字母的,算術題模式,漢字的,圖片選擇,手勢拖動的等等,下面將一一展示,選擇你想要的驗證碼:
  實現代碼:可到https://github.com/wangchengiii/CAPTCHA獲取。

驗證碼1-簡單四位字母數字 (點擊驗證碼不可更新,可進行輸入驗證,驗證碼無背景)

  下面是驗證碼1的實現效果:

  以上驗證碼實現完全通過js實現,其中有簡單的是否爲空驗證和驗證碼是否輸入錯誤驗證。
  具體實現代碼請到GitHub上獲取。

驗證碼2-簡單六位字母數字(點擊驗證碼可更新,可進行輸入驗證,驗證碼無背景)

  下面是驗證碼2的實現效果:
  
  以上驗證碼實現完全通過js實現,可點擊驗證碼更新,其中有簡單的是否爲空驗證和驗證碼是否輸入錯誤驗證。

驗證碼3-簡單四位字母數字(使用jquery插件,不兼容ie6-8,點擊驗證碼可更新,可進行輸入驗證,驗證碼有背景)

  下面是驗證碼3的實現效果:
  
  以上驗證碼實現通過使用jquery插件,使用canvas畫布來整體完成驗證碼實現,其中字母數字以及背景等都是隨機生成,其中有簡單的驗證碼結果驗證;但是由於插件是在js中動態生成canvas所以不兼容ie6-8。

驗證碼4-簡單四位字母數字(兼容ie6-8,使用jquery插件,點擊驗證碼可更新,可進行輸入驗證,驗證碼有背景)

  下面是驗證碼4的實現效果:
  
  以上驗證碼與驗證碼3唯一的不同之處在於它兼容了ie6-8,將之前的jquery代碼進行了修改,將動態生成的canvas畫布在html代碼中直接固定了,這樣就解決了不兼容的問題。
  以後還有更多的驗證碼喲,,,敬請期待!
  
  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章