如何重用自定义 jQuery 验证方法？

Question

我正在对项目中的许多表单使用 jQuery 验证。其中一些具有特定且棘手的验证要求，因此我以通常的方式编写了验证方法来处理它们：

    $.validator.addMethod('fancyValidationTest', function (value, element, arg) { 
           ...code... });

项目中的多个表单需要其中一些方法，因此我将方法定义放入包含对表单验证程序的调用的代码块中——$('#form_id').validate()..}) 或其他.但这是愚蠢的——我最终将相同的方法剪切并粘贴到我项目的多个地方，而我确实应该将这些方法放在项目的一个地方，然后让验证代码根据需要访问它们.

但到目前为止，运气不好。我已经尝试将这些方法移动到一个项目文件中，该文件加载了一堆其他常用的 javascript 代码，但这会产生不足为奇的控制台错误 TypeError: undefined is not an object (evaluating '$.validator.addMethod')。顺便说一句，这是一个基于 php 的项目，因此包含表单和验证代码的 "files" 实际上是在运行中构建的，而不是位于服务器上的静态 .html 文件某处。

所以：有没有办法将所有这些方法放在一个地方并让验证码找到它们？剪切和粘贴在这里不是正确的做法；谢谢！

Answer 1

Is there a way to get all these methods into a single place and have the validation code find them?

它与任何其他 JavaScript 或客户端代码没有什么不同。无论页面的构造方式如何，您都必须在 每个页面 中包含这些外部文件，无论您希望在何处使用这些脚本。大多数人只是将它们放在通用的页眉或页脚文件中。或者，如果只在一页上需要它们，则只将它们放在一页上。

... but this produces the not unsurprising console error TypeError: undefined is not an object (evaluating '$.validator.addMethod')

那你只是忘了包含验证插件，或者你忘了把它放在你的自定义.addMethod()方法之前.

这与使用此插件的 additional-methods.js 文件没有什么不同，后者也恰好只包含对 .addMethod() 的调用列表。

包括 jQuery，然后包括插件，然后包括任何其他方法。

<!--// include jQuery //-->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!--// include the validation plugin //-->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>

<!--// optionally include the additional methods //-->
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/additional-methods.js"></script>

<!--// include YOUR additional methods //-->
<script src="path-to-your-methods-file.js"></script>

<!--// NOW you call .validate() and initialize plugin //-->
<script>
    $(document).ready(function() { // <- ensures the HTML markup is loaded first
        $('#myform').validate({    // <- initialize plugin
            // rules, options, etc.
        });
    });
</script>

如何重用自定义 jQuery 验证方法？

How to reuse custom jQuery validation methods?

jquery

jquery-validate