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');