“文件类型”和“文件空间”不工作的验证

Question

我已经创建了表单，我想为File Type和File Size应用验证。我使用过来自演示的jquery.form-validator.js插件，但它不适用于文件类型和文件大小。当它为其他验证类型工作时。

表单的HTML代码如下，

​

$.validate({
  form: '#registration',

  validateOnBlur: true,
  showHelpOnFocus: true,
  addSuggestions: true,
  onSuccess: function($form) {
    alert("sucess")
    return false;
  },
  onError: function() {
    alert("Error")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<form id="registration" method="post" action="@Url.Action(" NewRegistration ", "StaticPage ")" enctype="multipart/form-data" class='has-validation-callback'>


  <div class="nwresfildblkwrap">
    <span>*</span>
    <input class="nwresmainfild" name="SignId" placeholder="LOGIN ID" data-validation="required" />

  </div>



  <div class="nwresformrowblk nwdocresformrowblk">
    <div class="nwdocfild ibvm">
      <input class="nwresmainfild" placeholder="REGISTRATION NO." id="uploadFile" disabled="disabled" />
    </div>
    <div class="nwdocfildbut ibvm fileUpload btn btn-primary">
      <span class="browesbutton">Choose File</span>
      <input id="uploadBtn" type="file" name="FinalGstFile" data-validation="mime size" data-validation-allowing="jpg, pdf" data-validation-max-size="1M" class="upload" />
    </div>
  </div>

  <div class="rightcontent nwtcright">
    <div class="nwsumbit ibvt">
      <input value="PROCESS & PRINT" class="green-btn uppercase" type="submit" id="btnSubmit" />
    </div>
    <div class="nwreset ibvt">
      <input value="RESET" class="gray-btn uppercase" type="reset" />
    </div>
  </div>

</form>

​

编辑：

我修改了一下，

 $.validate({
    modules: 'file, date',
    form: '#registration',

    validateOnBlur: true,
    showHelpOnFocus: true,
    addSuggestions: true,
    onModulesLoaded : function() {
        alert('All modules loaded!');
    },
    onSuccess: function ($form) {
        alert("sucess")
        return false;
    },
    onError: function () {
        alert("Error")
    }
});

它显示出“所有模块都加载了！”但是在控制台中，显示Uncaught Error: Using undefined validator "validate_mime". Maybe you have forgotten to load the module that "validate_mime" belongs to?时出错

Answer 1

使用<>代码创建代码段将立即显示控制台中的一个错误：

未定义错误:使用未定义的验证器"validate_mime“。也许您忘记加载"validate_mime“所属的模块了？

您需要要求文件处理

http://www.formvalidator.net/#configuration

更改下面添加的行

  modules : 'file, date',

拥有你所需要的

​

 /*$.formUtils.loadModules('location, date, file', null, function() {
         alert('modules loaded...');
     }); 
*/
$.validate({
  modules : 'file, date',
  form: '#registration',

  validateOnBlur: true,
  showHelpOnFocus: true,
  addSuggestions: true,
  onSuccess: function($form) {
    console.log("success")
    return false;
  },
  onError: function() {
    console.log("Error")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<form id="registration" method="post" action="@Url.Action(" NewRegistration ", "StaticPage ")" enctype="multipart/form-data" class='has-validation-callback'>


  <div class="nwresfildblkwrap">
    <span>*</span>
    <input class="nwresmainfild" name="SignId" placeholder="LOGIN ID" data-validation="required" />

  </div>



  <div class="nwresformrowblk nwdocresformrowblk">
    <div class="nwdocfild ibvm">
      <input class="nwresmainfild" placeholder="REGISTRATION NO." id="uploadFile" disabled="disabled" />
    </div>
    <div class="nwdocfildbut ibvm fileUpload btn btn-primary">
      <span class="browesbutton">Choose File</span>
      <input id="uploadBtn" type="file" name="FinalGstFile" data-validation="mime size" data-validation-allowing="jpg, pdf" data-validation-max-size="1M" class="upload" />
    </div>
  </div>

  <div class="rightcontent nwtcright">
    <div class="nwsumbit ibvt">
      <input value="PROCESS & PRINT" class="green-btn uppercase" type="submit" id="btnSubmit" />
    </div>
    <div class="nwreset ibvt">
      <input value="RESET" class="gray-btn uppercase" type="reset" />
    </div>
  </div>

</form>

​

这会导致

​