jquery 驗證碼效果程式碼例項

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它利用jquery實現了簡單的驗證碼效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  padding: 0;
  margin: 0;
}
ul {
  padding: 0;
  margin: 0;
}
.box {
  width: 600px;
  height: auto;
  margin: 0 auto;
}
.box > div {
  margin-top: 15px;
  font-size: 18px;
}
.box .code-box .code {
  font-size: 22px;
  color: #f00;
}
.box .code-box .huan {
  font-size: 18px;
  cursor: pointer;
}
.box .input input {
  width: 200px;
  height: 28px;
}
.button {
  text-align: center;
  width: 80px;
  height: 30px;
  background: #FF3333;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.change {
  color: #f00;
  font-size: 16px;
  display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
$(function() {
  $(".huan").on("click", createCode)
  createCode();
})
var code;
 
function createCode() {
  var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
  code = '';
  var codeLength = 5;
  var codeContent = $(".code");
  for (var index = 0; index < codeLength; index++) {
    var charIndex = Math.floor(Math.random() * selectChar.length);
    //alert(charIndex)
    code += selectChar[charIndex];
    codeContent.html(code);
  }
}
 
$(".button").on("click", function() {
  var Code = $("#code").val();
  if (Code.length <= 0) {
    $(".change").show();
  } else if (Code != code) {
    $(".change").show().html("驗證碼有誤");
    createCode();
  } else {
    $(".change").html("驗證碼正確");
  }
})
</script>
</head>
<body>
  <div class="box">
    <div class="code-box">
      <span>驗證碼</span>
      <span class="code"></span>
      <span class="huan">換一張</span>
    </div>
    <div class="input">
      <span>輸入驗證碼</span>
      <input type="text" id="code" placeholder="輸入驗證碼">
      <span class="change">驗證碼為空</span>
    </div>
    <div class="button">提交</div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function() {}）,當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".huan").on("click", createCode)，為class屬性值為huan的元素註冊click事件處理函式，點選即可實現重新整理驗證碼。

（3）.createCode(),頁面載入完畢就會顯示驗證碼。

（4）.var code，宣告一個變數，用來儲存驗證碼字串。

（5）.function createCode() {}，實現生成驗證碼功能。

（6）.var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)，建立一個陣列，陣列的元素用來組成驗證碼，可以自己再新增更多。

（7）.code = ''，將驗證碼字串清空，防止下一次生成疊加。

（8）.var codeLength = 5，驗證碼的長度。

（9）.var codeContent = $(".code")，獲取對應的元素物件。

（10）.for (var index = 0; index < codeLength; index++) {

  var charIndex = Math.floor(Math.random() * selectChar.length);

  code += selectChar[charIndex];

  codeContent.html(code);

}，通過迴圈方式生成指定長度的驗證碼。

二.相關閱讀:

（1）.Math.floor()可以參閱javascript Math.floor()一章節。

（2）.Math.random()可以參閱javascript Math.random()一章節。

相關文章