JQuery 使用多种自定义方法进行验证

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

<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>

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

我在这里错过了什么？

我猜你的想法有点错误，并试图以不正确的方式使用 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>

相关内容

最新更新

热门标签：