前端js實現--登錄驗證二維碼

 數字和字母組合的四位驗證碼

HTML如下 

         <li class="border testcode">
            <i class="iptestcode"></i>
            <div class="divipt testcodeipt">
              <input type="password" class="iptcode" placeholder="請輸入驗證碼"></input>
            </div>
          </li>
         //  二維碼放置盒子
          <input id="code" class="logincode">

js代碼如下 

var code; // 在全局定義驗證碼
createCode();
// 生成驗證碼
function createCode() {
    code = "";
    var codeLength = 4;// 驗證碼的長度
    var checkCode = document.getElementById("code");
    var random = new Array(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');// 隨機數
    for (var i = 0; i < codeLength; i++) {// 循環操作
        var index = Math.floor(Math.random() * 36);// 取得隨機數的索引（0~35）
        code += random[index];// 根據索引取得隨機數加到code上
    }
    checkCode.value = code;// 把code值賦給驗證碼
}

// 校驗驗證碼
function validate() {
    var inputCode = document.getElementById("input").value.toUpperCase(); // 取得輸入的驗證碼並轉化爲大寫
    if (inputCode.length <= 0) { // 若輸入的驗證碼長度爲0
        alert("請輸入驗證碼！"); // 則彈出請輸入驗證碼
        return;
    } else if (inputCode != code) { // 若輸入的驗證碼與產生的驗證碼不一致時
        alert("驗證碼輸入錯誤!"); // 則彈出驗證碼輸入錯誤
        createCode();// 刷新驗證碼
        document.getElementById("input").value = "";// 清空文本框
        return;
    } else {
             // 輸入正確時 執行登錄邏輯
    }
}