基于Parsley实现文件输入框的图片最小尺寸自定义验证

我来帮你把这个自定义验证器完善好，实现图片最小尺寸的检查功能，同时兼顾其他验证需求～

完整的自定义验证器代码 #

首先补全你未完成的代码，因为图片加载是异步操作，我们需要用Promise来处理，Parsley原生支持异步验证的逻辑：

window.Parsley.addValidator('imagemindimensions', {
  requirementType: 'string',
  validateString: function (value, requirement, parsleyInstance) {
    // 获取输入框选中的文件
    const file = parsleyInstance.$element[0].files[0];
    
    // 如果没有选择文件，直接返回true（必填验证交给Parsley的required属性单独处理）
    if (!file) return true;

    // 解析配置的最小尺寸，比如传入的"800x600"会拆分成宽800、高600
    const [requiredWidth, requiredHeight] = requirement.split('x').map(Number);

    // 返回Promise异步验证图片尺寸
    return new Promise((resolve) => {
      const image = new Image();
      
      // 图片加载完成后检查尺寸
      image.onload = function() {
        // 判断实际尺寸是否大于等于要求的最小尺寸
        const isValid = image.width >= requiredWidth && image.height >= requiredHeight;
        resolve(isValid);
        // 释放临时URL，避免内存泄漏
        URL.revokeObjectURL(image.src);
      };
      
      // 图片加载失败（比如不是有效图片）时返回验证失败
      image.onerror = function() {
        resolve(false);
        URL.revokeObjectURL(image.src);
      };
      
      // 用文件的临时URL加载图片
      image.src = URL.createObjectURL(file);
    });
  },
  // 多语言错误提示，%s会自动替换成你设置的尺寸参数
  messages: {
    en: 'Image must be at least %s pixels (width × height).',
    zh_cn: '图片尺寸不得小于 %s 像素（宽×高）。'
  }
});

在HTML中使用验证器 #

把验证属性加到你的文件输入框上即可，示例如下：

<input 
  type="file" 
  id="image-upload" 
  name="image"
  data-parsley-validate
  data-parsley-imagemindimensions="800x600"
  data-parsley-required="true"
  data-parsley-required-message="请选择一张图片"
  accept="image/*"
>

关键细节说明 #

• 异步处理：图片加载是异步的，所以验证函数返回Promise，Parsley会等待Promise完成后再判断验证结果，不会阻塞页面交互。
• 空文件处理：如果用户没选文件，这里返回true，如果需要必填，单独用data-parsley-required属性来控制，职责划分更清晰。
• 内存优化：加载完成后调用URL.revokeObjectURL()释放临时URL，避免长时间占用内存。
• 格式限制：添加accept="image/*"可以让浏览器只允许选择图片文件，减少非图片文件的验证异常。

搭配其他验证（可选） #

如果还需要验证文件大小，可以再添加一个自定义验证器，比如限制最大5MB：

window.Parsley.addValidator('maxfilesize', {
  requirementType: 'number',
  validateString: function(value, requirement, parsleyInstance) {
    const file = parsleyInstance.$element[0].files[0];
    if (!file) return true;
    // 将文件大小转换为MB
    const fileSizeMB = file.size / (1024 * 1024);
    return fileSizeMB <= requirement;
  },
  messages: {
    en: 'File size must be less than %s MB.',
    zh_cn: '文件大小不得超过 %s MB。'
  }
});

然后在HTML里加上对应的属性：

data-parsley-maxfilesize="5"

内容的提问来源于stack exchange，提问作者Jones03