javascript - 使用 requirejs 加载 jquery 验证

Question

我正在为 requirejs 苦苦挣扎.我定义了以下 jquery 验证自定义插件模块:

validation-addon.js

define(['jquery', 'jquery.validate', 'jquery.validate.unobtrusive'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

我的 requirejs 配置文件:

config.js

require.config({
    baseUrl: '/Scripts',
    paths: {
        'jquery': 'lib/jquery-2.0.3',
        'jquery.validate': 'lib/jquery.validate',
        'jquery.validate.unobtrusive': 'lib/jquery.validate.unobtrusive',
    },
    shim: {
        'jquery.validate': {
            deps: ['jquery']
        },
        'jquery.validate.unobtrusive': {
            deps: ['jquery.validate']
        }
    }
});

我在我的 mvc 用户注册 View 中使用这些模块，如下所示:

register.cshtml

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

我面临的问题有点奇怪。当我第一次进入用户注册 View 并在使用输入字段中输入错误值时，我在 jquery 验证器上重写的自定义突出显示和取消突出显示功能未执行，但如果我重新加载注册 View 本身，然后它突然开始执行。

我的感觉是，这可能是由于模块的加载顺序而发生的，但我不明白如何解决这个问题，有人可以帮我解决这个问题吗？

Answer 1

这看起来像是一个时间问题。当您重新加载时，这些问题有时会很明显，因为事物初始化的顺序取决于缓存中的内容等。

现在 jquery.validate.unobtrusive 可能会在 调用 $.validator.setDefaults 的代码之前在 DOM 上工作> 被执行。要检查 $.validator.setDefaults 是否在 jquery.validate.unobtrusive 之前执行，请从 中删除 jquery.validate.unobtrusive 要求validation-addon.js 并将其添加到您的主文件中。

将 validation-addon.js 更改为:

define(['jquery', 'jquery.validate'], 

function ($) {

    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });

    ....
});

并将register.cshtml更改为:

require(['/Scripts/modules/config.js'], function () {
    require(['modules/user-register', 'modules/validation-addon', 'jquery.validate.unobtrusive'], 

     function (userregistration) {
        //using user registration module here..
    }

  );
});

如果这解决了您的问题，您可能不想保留这样的代码，但这是一种快速简便的方法来检查这是否是问题所在。