前端註冊驗證碼校驗

一、      校驗方式

輸入後直接校驗有好幾種方式，以前一直再用的是onblur事件，當失去焦點是驗證，可是註冊碼校驗一般是最後一個表單輸入，用戶輸入完直接點擊提交，就會執行onblur事件，而不會執行提交事件，致使用戶須要提交兩次才能提交，用戶體驗感會至關差。如今替換成onkeyup事件，當用戶的輸入域中鍵入字符時，就當即觸發事件。

二、      以下面代碼同樣

首先咱們先定義一個flag狀態 設置爲false 和flag 提示內容。當咱們觸發事件時，咱們使用document.getElementById(x).value獲取輸入值對其校驗.在咱們項目中，校驗碼的位數是5位，因此咱們在事件中判斷位數爲5位數時才作校驗，若是非5位數的輸入時flag狀態都設置爲false。當咱們提交表單時，咱們會再一次去判斷vcaptechStatus狀態的值，若是爲false時，咱們就作出錯誤提示，提示的內容爲vcaptechStr的值，而且不讓去提交表單。

<input id="j_captcha_response" style="width:100px;margin-top: 8px;margin-left: 10px;"   type="text" name="j_captcha_response" value='' onkeyup="verifyCaptcha()">

function verifyCaptcha(){ var vcaptechStatus=false; var vcaptechStr="驗證碼驗證不經過，請從新輸入"  var t=document.getElementById("j_captcha_response").value;      if(t.length==5){             $.ajax({               url : "${ctx }/Captcha.do?captcha",               data : "id="+t,               success : function(result) {                   if(result){                      vcaptechStatus=success("#vcaptech",'驗證碼正確');                           vcaptechStr='驗證碼正確';                   }else{                          vcaptechStatus=error("#vcaptech",'驗證碼輸入錯誤');                           vcaptechStr='驗證碼輸入錯誤';                    }            }            });         }else{         vcaptechStatus=false;         $("#vcaptech").html("");         vcaptechStr="驗證碼驗證不經過，請從新輸入"      } }