Question

我有一个表单，用户输入图像然后提交。我使用jQuery验证器插件来验证图像是否真的是图像，图像的文件大小和图像的尺寸。用户不必上传图像，但如果他们这样做，则图像将经历这些规则。我还放了一个裁剪插件。此插件（crobox）根据用户想要裁剪的内容裁剪图像。目前，表单与验证规则一起正常工作。但是，用户不需要提交图像，但验证器告诉用户即使用户没有上传任何内容，用户也应提交至少600px x 360px的图像。当用户不想上传图像时，如何使验证器不显示错误？这是我的 jsfiddle

HTML

<form class="properties_form" action="" method="post">
  <div class="imageGroup">
    <input class="image_upload" name="image_upload" type="file">
    <div class="imgBox">

    </div>
  </div>
  <input class="finish_btn" type="submit">
</form>

的jQuery

$(".properties_form").validate({
  errorElement: 'div',
  rules: {

    image_upload: {
      extension: "jpg|png|jpeg|JPG|PNG|JPEG",
      filesize: 100000,
      minImageSize: {
        width: 600,
        height: 360
      }
    },
  },


  messages: {
    image_upload: {
      extension: "We only accept .jpg and .png images.",
      minImageSize: "Your image must be at least 600px by 360px.",
      filesize: "Your image size should not exceed 100KB"
    },
  },

});


var $form = $('.properties_form'),
  $finish_btn = $form.find('finish_btn');
$form.find('.image_upload').change(function() {
  var $image_upload = $(this),
    $imgBox = $image_upload.closest('.imageGroup').find('.imgBox');

  $image_upload.removeData('imageSize');
  $imgBox.hide().empty();

  var file = this.files[0];

  if (file.type.match(/image\/.*/)) {
    $finish_btn.attr('disabled', true);

    var reader = new FileReader();

    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $imgBox.append($img).show();

        $image_upload.data('imageSize', {
          width: $img.width(),
          height: $img.height()
        });

        $img.css({
          display: "none"
        });

        $finish_btn.attr('disabled', false);

        validator.element($image_upload);
      });
    }

    reader.readAsDataURL(file);
  } else {
    validator.element($image_upload);
  }
});


$(function() {

  $(".image_upload").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 650,
          height: 360
        }).on('cropbox', function(event, results, img) {

        });
      });

      $('.imgBox').append($img);

    };
    reader.readAsDataURL(file);
  });
});

$.validator.addMethod('minImageSize', function(value, element, minSize) {
  var imageSize = $(element).data('imageSize');
  return (imageSize) && (imageSize.width >= minSize.width) && (imageSize.height >= minSize.height);
}, function(minSize, element) {
  return ($(element).data('imageSize')) ? ("Your image's size must be at least " + minSize.width + "px by " + minSize.height + "px") : "Selected file is not an image.";
});

$.validator.addMethod('filesize', function(value, element, param) {
  return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');

Answer 1

验证器告诉用户即使用户没有上传任何内容，用户也应该提交至少600px x 360px的图像

那是因为您忘记了def testUpdateDB(passFileName): f = open(passFileName, 'r') for Line in f: Line = Line.replace('\r',"") Line = Line.replace('\n', "") row = Line.split(",") AryList = {"Probes": row[0], "Entries":row[2], "Symbol": row[3], "Pattern":row[4], "Day1": row[5], "Day3": row[6] } try: # Update the database t = Data.objects.get(Probes=AryList["Probes"]) print(t.Probes + " has " + t.Entries + " for its entries, updating to " + AryList["Entries"]) t.Entries = AryList["Entries"] t.save() u = Data.objects.get(Probes=AryList["Probes"]) print(u.Probes + " has " + u.Entries + " for its entries now. Update was sussess!") except: print("Could not find: " + AryList["Probes"])规则可选。

minImageSize

如果没有此部分，将始终在空字段上评估规则。您需要使用return this.optional(element) || .....来检查元素是否为＆＃34;可选＆＃34; ...

this.optional(element)

删除要求jQuery最小图像尺寸

1 个答案: