快捷導(dǎo)航

JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼

更新時(shí)間：2019年01月21日 15:45:28 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于JavaScript使用Math.random()生成簡(jiǎn)單的驗(yàn)證碼，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧

第一種：?jiǎn)渭兊募償?shù)字驗(yàn)證碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js驗(yàn)證碼</title>
</head>
<body>
<div class="yzm" style="width: 20%;height: 300px;text-align: center;background-color: pink;line-height: 200px;"></div>
</body>
</html>
<script>
  window.onload = function () {
    var yzm=document.querySelector(".yzm");
    //頁(yè)面一加載完成就生成隨機(jī)數(shù)調(diào)用rand()
    yzm.innerHTML=rand(5);
    //點(diǎn)擊切換隨機(jī)碼
    yzm.onclick=function() {
      var num = rand(5);
      this.innerHTML = num;
    };
    //生成隨機(jī)碼
    function rand(number){
   //用來(lái)存儲(chǔ)產(chǎn)生的隨機(jī)數(shù)
    var num="";
      for(var i=0;i<number;i++){
        num+=Math.floor(Math.random()*10)
      }
      return num;
    }
  }
</script>

第二種：輸入的驗(yàn)證碼與生成的驗(yàn)證碼進(jìn)行校驗(yàn)(數(shù)字與字母相結(jié)合)

<html>
<head>
  <meta charset="UTF-8">
  <title>驗(yàn)證碼</title>
  <style type="text/css">
    #code
    {
      font-family:Arial;
      font-style:italic;
      font-weight:bold;
      border:0;
      letter-spacing:2px;
      color:blue;
    }
  </style>
</head>
<body>
<div>
  <input type = "text" id = "input"/>
  <input type = "button" id="code" onclick="createCode()"/>
  <input type = "button" value = "驗(yàn)證" onclick = "validate()"/>
</div>
</body>
</html>
<script>
  var code ; //在全局定義驗(yàn)證碼
  var number = 5;//驗(yàn)證碼生成的個(gè)數(shù)
  var checkCode = document.getElementById("code");
  //產(chǎn)生驗(yàn)證碼(頁(yè)面一加載就生成)
  window.onload = function (){
    createCode();
  };
  //產(chǎn)生驗(yàn)證碼(輸入錯(cuò)誤的時(shí)候刷新驗(yàn)證碼，函數(shù)調(diào)用)
  function createCode(){
    code = "";
    var codeLength = number;//驗(yàn)證碼的長(zhǎng)度
//    var checkCode = document.getElementById("code");
    var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
      'S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',
      's','t','u','v','w','x','y','z'];//隨機(jī)數(shù)
    for(var i = 0; i < codeLength; i++) {//循環(huán)操作
      var index = Math.floor(Math.random()*random.length);//取得隨機(jī)數(shù)的索引(random.length)
      code += random[index];//根據(jù)索引取得隨機(jī)數(shù)加到code上
    }
    checkCode.value = code;//把code值賦給驗(yàn)證碼
  }
  //校驗(yàn)驗(yàn)證碼
  function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得輸入的驗(yàn)證碼并轉(zhuǎn)化為大寫(xiě)
    if(inputCode.length <= 0) { //若輸入的驗(yàn)證碼長(zhǎng)度為0
      alert("請(qǐng)輸入驗(yàn)證碼！"); //則彈出請(qǐng)輸入驗(yàn)證碼
    } else if(inputCode != code.toUpperCase() ) { //將隨機(jī)產(chǎn)生的驗(yàn)證碼轉(zhuǎn)化為大寫(xiě)，若輸入的驗(yàn)證碼與產(chǎn)生的驗(yàn)證碼不一致時(shí)
      alert("驗(yàn)證碼輸入錯(cuò)誤！@_@"); //則彈出驗(yàn)證碼輸入錯(cuò)誤
      createCode();//刷新驗(yàn)證碼
      document.getElementById("input").value = "";//清空文本框
    }
    else { //輸入正確時(shí)
      alert("正確^-^"); //彈出^-^
    }
  }
</script>

若有不足請(qǐng)多多指教！希望給您帶來(lái)幫助！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

您可能感興趣的文章: