[jQuery]Validation配合驗證碼(Captcha)

作者: fase 日期: 2013-12-12 09:23

字體大小: 小中大

Validation若要即時驗證Captcha需要使用額外的Method
剛好自己要用到
就整理一下供大家和自己參考

先看一下，html碼的部分
<img src="code_num.php" id="getcode_num" title="Refresh Captcha" align="absmiddle" />
<input name="code_num" id="code_num" type="text" />

再來jQuery的部分
$(document).ready(function() {
$.validator.addMethod('checkCaptcha', function() {
   var bfr = false;
    var code = $('#code_num').val();
    var phpquery = $.ajax({url:'chk_code.php',
      type: 'POST',
      async: false,
      data:'act=num&code=' + code,
      success:function(resp) {
        if (resp == 'true') {
          bfr = true;
        }
      }
    });
   if(bfr){
      return true;
    } else {
     $('#getcode_num').attr('src','code_num.php?' + Math.random());
     return false;
    }
},'');
   $('#sendFrm').validate({
    onkeyup: false,
     rules:{
        code_num: {
        required: true,
          checkCaptcha: true
        }
     },
    messages:{
       code_num:{
         checkCaptcha: 'Your Captcha response was incorrect. Please try again.'
       }
    }
  });
});
簡單說明一下
就是先增加一個Method(checkCaptcha)
這個Method目的是即時檢查驗證碼
而輸入錯誤的話，就再次更新驗證碼
所以後端也要有一支程式去比對驗證碼
如果不需即時驗證的話，那其實就用不到這方法了

在驗證時，就要把這Method代入
其它都算基本的格式