前些日子接觸到一個項目，要求實現一個簡單的驗證碼，參考萬能的百度結合自己的想法實現了一個簡單的前端驗證碼，當然跟后臺的不能比安全性，

頁面部分：

驗證碼js實現部分：

var code ; //在全局定義驗證碼

//產生驗證碼

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值賦給驗證碼

}

//校驗驗證碼

document.getElementById("Yzm").addEventListener("change",validate);

function validate(){

var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得輸入的驗證碼并轉化為大寫

if(inputCode.length <= 0) { //若輸入的驗證碼長度為0

alert("請輸入驗證碼！"); //則彈出請輸入驗證碼

$("#Yzm").focus();

YZM = false;

}

else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時

alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤

createCode();//刷新驗證碼

$("#Yzm").val("");//清空文本框

$("#Yzm").focus();//重新聚焦驗證碼框

YZM = false;

}

else { //輸入正確時

$("#Yzm").blur();//綁定驗證碼輸入正確時要做的事

YZM = true;

}

};附效果圖：

總結

以上是生活随笔為你收集整理的html前端验证代码,前端js+html实现简单验证码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。