JQuery 使用多种客户方法进行验证

Question

我正在尝试为几个元素创建验证。我正在尝试的最小测试是这样的：

<html>
<head>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>

<form>
<input id="valCategories" class="valCategories" type="hidden" value="0" />
<input id="valPermissions" class="valPermissions" type="hidden" value="0" />

<input type="submit" value="submit"/>
</form>

<script>
$(document).ready(function(){

 // jQuery Validate Settings
 $.validator.setDefaults({
  ignore: ''
 });
 $.validator.addClassRules({});
 
 $.validator.addMethod('valPermissions', function (value, element) {
     return !!+value;
 },"error permissions");
 $.validator.addMethod('valCategories', function (value, element) {
     return !!+value;
 },"error categories");

 $('form').validate();
});
</script>

</body>
</html>

我预计会收到两条错误消息： - 错误权限 - 错误类别但无论我尝试什么，我只收到一条错误消息。

我在这里错过了什么？

Answer 1

我猜您的思考方向有些错误，并试图以错误的方式使用 jquery 验证插件。对多个字段使用自定义方法的正确方法如下。基本上你需要先定义自定义方法，然后你需要将它们绑定到相应的表单字段。如果需要，您也可以将相同的方法附加到多个字段：

$(document).ready(function() {

  // jQuery Validate Settings
  $.validator.setDefaults({
    ignore: ''
  });
  $.validator.addClassRules({});


  $.validator.addMethod('valCategoriesMeth', function(value, element) {
    return !!+value;
  }, "error categories");

  $.validator.addMethod('valPermissionsMeth', function(value, element) {
    return !!+value;
  }, "error permissions");



  $('form').validate({
    rules: {
      valCategories: {
        // Add the custom validation methods to the valCategories input
        valCategoriesMeth: true
      },
      valPermissions: {
        // Add the custom validation methods to the valPermissions input
        valPermissionsMeth: true
      }
    }
  });

});

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
</head>

<body>

  <form>
    <input id="valCategories" name="valCategories" class="valCategories" type="hidden" value="0" />

    <input id="valPermissions" name="valPermissions" class="valPermissions" type="hidden" value="0" />

    <input type="submit" value="submit" />
  </form>

</body>

</html>

使用 addClassRules 方法，您可以按以下方式进行：

$.validator.setDefaults({ ignore: '' });
  
$(document).ready(function() {

  // jQuery Validate Settings
  

  $.validator.addMethod('valCategoriesMeth', function(value, element) {
    return !!+value;
  }, "error categories");

  $.validator.addMethod('valPermissionsMeth', function(value, element) {
    return !!+value;
  }, "error permissions");

  $.validator.addClassRules({
    valCategories: {
      valCategoriesMeth: true
    },
    valPermissions: {
      valPermissionsMeth: true
    }
  });

  $('form').validate();
});

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js" type="text/javascript"></script>
</head>

<body>

  <form>

    <input id="valCategories"  name="valCategories" class="valCategories" type="hidden" value="0" />
   
   <input id="valPermissions" name="valPermissions" class="valPermissions" type="hidden" value="0" />
   
    <input type="submit" value="submit" />
  </form>

JQuery 使用多种客户方法进行验证

JQuery validate with multiple custome methods

jquery

jquery-validate