jQuery驗證插件自定義方法總是返回無效

Question

請幫助找出我的jQuery驗證問題。我正在使用jQuery Validation plugin驗證我的表單。我添加了檢查圖像尺寸的自定義規則（試圖上傳圖像）。這裏是

$.validator.addMethod('checkDim', function (value, element, param) {  
    var image = new Image(); 
    var file = element.files[0]; 
    var _URL = window.URL || window.webkitURL; 
    image.src = _URL.createObjectURL(file); 
    image.onload = function() { 
     console.log("The image width is " + this.width + " and image height is " + this.height); 
     if(this.width == param[0] && this.height == param[1]){ 
      return true; 
     } 
     else{    
      return false; 
     } 
    }; 

}, 'Image dimension must be as specified'); 

我已經加入類似下面

image: {required: true, accept: "image/*", checkDim: [1366,311]} 

功能的規則被正確地稱爲我可以在控制檯中看到消息，也維度也正確計算自定義方法的代碼，但這個函數總是返回無效。

請幫我弄清楚我做錯了什麼。

Answer 1

您的元素參數會給出與您的元素相關的屬性，即圖像。您不需要onload事件或需要創建圖像對象。

$.validator.addMethod('checkDim', function(value, element, param) { 
     var width = $(element).width(); 
     var height = $(element).height(); 
     console.log("The image width is " + width + " and image height is " + height); 
     if (width == param[0] && height == param[1]) { 
      return true; 
     } else { 
      return false; 
     } 
    }, 'Image dimension must be as specified');