欧芹图像尺寸验证

Question

我有一个文件输入字段，我想为其验证最小图像尺寸（除其他事项外）。 我将Parsley用作前端验证库，因此尝试添加自定义验证器来执行此操作。

这是我的自定义验证程序代码：

window.Parsley.addValidator('imagemindimensions', {
    requirementType: 'string',
    validateString: function (value, requirement, parsleyInstance) {

        let file = parsleyInstance.$element[0].files[0];
        let [width, height] = requirement.split('x');

        let image = new Image();

        image.src = window.URL.createObjectURL(file);
        image.onload = function() {
            return image.width >= width && image.height >= height;
        };
    },
    messages: {
        en: 'Image dimensions have to be at least  %s px'
    }
});

我的HTML：

<input type="file"
       name="upload-photo"
       accept="image/*"
       class="js-photo-upload"
       data-parsley-validate
       data-parsley-trigger="change"
       data-parsley-imagemindimensions="300x300">

JS代码来处理文件输入更改：

$(document).on('change', '.js-photo-upload', function() {
    if ($(this).parsley().isValid()) {
        // process image
    }
});

现在，运行验证器时，它始终会通过。 我怀疑这是因为Parsley无法处理image.onload的异步代码块。 关于如何在Parsley lib中解决此问题的任何想法？

到目前为止，我找到的解决方案是：

• 使用自定义的远程验证器 ， 并由后端负责。 但这会导致很小的延迟，并且会首先在客户端执行一些操作，从而对服务器造成冲击。
• 检查更改事件侦听器上我的文件输入中的尺寸，并使用addError方法手动添加Parsley错误。 但这有点骇人听闻，并且要求我在下次验证该字段时手动删除该错误。

Answer 1

validateString需要返回一个Promise 。 onload应该完全填充或拒绝它，而不是返回true/false

Answer 2

根据Marc-André的回答，我更新了验证器：

window.Parsley.addValidator('imagemindimensions', {
    requirementType: 'string',
    validateString: function (value, requirement, parsleyInstance) {

        let file = parsleyInstance.$element[0].files[0];
        let [width, height] = requirement.split('x');
        let image = new Image();
        let deferred = $.Deferred();

        image.src = window.URL.createObjectURL(file);
        image.onload = function() {
            if (image.width >= width && image.height >= height) {
                deferred.resolve();
            }
            else {
                deferred.reject();
            }
        };

        return deferred.promise();
    },
    messages: {
        en: 'Image dimensions have to be at least  %spx'
    }
});

然后，我通过以下方式调整了文件输入事件侦听器：

$(document).on('change', '.js-photo-upload', function() {
    $(this).parsley().whenValid({}).done(function () {
        // process image
    });
});