Question

我有一个文件输入字段，我想要验证最小图像尺寸（以及其他内容）。我使用Parsley作为我的前端验证库，因此我尝试添加custom validator来执行此操作。

这是我的自定义验证码：

myControlX = new List<UserControlA> {
    myControl1, myControl2, myControl3, myControl4, myControl5
};

myCustomTaskPaneX = new List<Microsoft.Office.Tools.CustomTaskPane> {
            myCustomTaskPane1, myCustomTaskPane2, myCustomTaskPane3, myCustomTaskPane4, myCustomTaskPane5
};

我的HTML：

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

用于处理文件输入更改的JS代码：

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

现在运行验证器时，它总是通过。我怀疑这是因为Parsley无法处理$(document).on('change', '.js-photo-upload', function() { if ($(this).parsley().isValid()) { // process image } });中的异步代码块。关于如何在Parsley lib中解决这个问题的任何想法？

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

使用自定义remote validator，并让后端注意它的。但这会导致一个小的延迟，并在服务器上点击可以先在客户端完成。
检查更改事件侦听器和文件输入中的维度使用image.onload方法手动添加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
    });
});

欧芹图像尺寸验证

2 个答案: