Jquery 验证插件 - TypeError: $(...).validate 不是函数答案

【问题标题】：Jquery validation plugin - TypeError: $(...).validate is not a functionJquery 验证插件 - TypeError: $(...).validate 不是函数
【发布时间】：2014-02-07 20:09:21
【问题描述】：

我的脚本抛出错误：

TypeError: jQuery.validator is undefined additional-methods.js:20 TypeError: $(...).validate 不是函数 index.php:115

可能是我的 jQuery 代码有错误。

<head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
</head>
<body>
            <form id="registerForm" method="post" action="logrej.php">
            <input name="login" type="text"/>
            <input name="nick" type="text"/>
            <input type="password" id="passw" name="password"/>
            <input type="password" name="retype" />
            <input type="submit" value="Zarejestruj!" />
            </form>
            <script>

                $("#registerForm").validate({
                    rules: {
                        login: {
                            required:true,
                            rangelenght: [4,20],
                            remote:"look.php"
                        },
                        nick : {
                            required:true,
                            rangelenght:[4,20],
                            remote:"look.php"
                        },
                        password: {
                            required:true,
                            rangelenght:[4.20]
                        },
                        retype: {
                            required:true,
                            equalTo:"#passw"
                        }
                    },
                    messages:{
                        login:{
                            required:"To pole jest wymagane!"
                        }
                    }
                })

            </script>

【问题讨论】：

你有几行错字：rangelenght 应该是rangelength。

标签： javascript jquery jquery-validate

【解决方案1】：

您没有加载验证插件。你需要：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

将此放在加载附加方法的行之前。

此外，您还应该从 CDN 获取其他方法，而不是 jquery.bassistance.de。

其他错误：

[4.20]

应该是

[4,20]

和

rangelenght:

应该是：

rangelength:

【讨论】：

【解决方案2】：

对我来说，通过将 http://ajax... 更改为 https://ajax... 解决了问题（在 http 中添加 S）

https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

【讨论】：

【解决方案3】：

在additional-methods.js 之前包含jquery.validate.js。

$.validate() 方法在那里定义

【讨论】：

给定链接中的错误无法访问站点

【解决方案4】：

看起来你得到的 JavaScript 错误可能是由

引起的

password: {
    required:true,
    rangelenght:[4.20]
},

因为[4.20] 应该是[4,20]，我猜这会丢弃additional-methods 中的验证代码，因此会给出您发布的类型错误。

编辑：正如其他人在下面的 cmets 中指出的那样，rangelenght 也拼写错误并且jquery.validate.js 库似乎丢失了（假设它没有编译到您的其他资产之一中）

【讨论】：

我认为这不会引发正在发生的类型错误。但如果不修复它可能会在以后引起问题。
他在rangelenght中也有错字。
我最初并没有计时 jquery.validate.js 丢失了，这更可能是问题（或者至少是抛出这些警告的问题，rangelengtht 拼写和 [4.20 ] 可能不会有任何帮助:p)。

【解决方案5】：

我遇到了同样的问题。我将 jquery-validation 用作 npm 模块，对我来说，解决方法是在我的 js 文件开头要求该模块：

require('jquery-validation');

【讨论】：

【解决方案6】：

对我来说，问题出在 require('jquery-validation') 我在该 js 文件的请求中添加了 Validate 方法，这是 npm 模块所必需的

不幸的是，webpack在编译js文件时，它们没有顺序，所以validate方法在定义之前！错误来了

最好使用另一个 js 文件来编译这个库或使用本地验证方法文件，甚至使用 CDN，但在所有情况下，请确保您之前附加了 jquery

【讨论】：

【解决方案7】：

您没有包含基本的 jQuery 验证库：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

把它放在附加方法库之前。（顺便说一句，这是一个托管版本，如果需要，请自行下载）

【讨论】：

【解决方案8】：

“验证器.min.js” 你需要在“jquery-3.4.1.min.js”之后导入这个JS文件。对你来说，版本可能会改变，但这种方式对我有用。

第 1 步：您的项目链接文件或者它可能是 CDN

第 2 步：

放置validator.min.js CDN链接或项目JS文件夹链接。

就这些了，希望对你有帮助。

【讨论】：

【解决方案9】：

如果使用VueJS，先导入jQuery扩展的所有js依赖，再导入$秒...

import "../assets/js/jquery-2.2.3.min.js"
import "../assets/js/jquery-ui-1.12.1.min.js"
import "../assets/js/jquery.validate.min.js"
import $ from "jquery";

然后，您需要从 VueJS 原型方法中全局定义的自定义包装器调用的 javascript 函数中使用 jquery。

这可以防止 jQuery 和 jQuery UI 的使用与 VueJS 发生冲突。

Vue.prototype.$fValidateTag = function( sTag, rRules ) 
{
    return ValidateTag( sTag, rRules );
};

function ValidateTag( sTag, rRules )
{
    Var rTagT = $( sTag );
    return rParentTag.validate( sTag, rRules );
}

【讨论】：

【解决方案10】：

我遇到了同样的错误，但原因完全不同。

我一直在以正确的顺序加载库，但问题是我将 jQuery("#contact_form").validate(); 包装在 jQuery(document).ready(function () {}); 中。

当我把它放在外面时，错误消失了。

【讨论】：