2

私は自分のプロジェクトでjquery-validationを機能させようと戦ってきましたが、自分の jquery オブジェクトに接続していないようです。

私のpackage.jsonの外観は次のとおりです。

{
  "name": "web01",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "2.1.3",
    "pathjs": "0.8.1",
        "jquery-validation" : "1.13.1"
  },
  "devDependencies": {
    "browserify": "8.0.2",
    "browserify-mustache": "0.0.4",
    "browserify-shim": "3.8.2",
    "phantomjs": "1.9.13",
    "mocha-phantomjs": "3.5.2",
    "mocha": "2.1.0",
    "sinon": "1.12.2",
    "proxyquireify": "1.1.0"
  },
  "browserify": {
    "transform": [
      "browserify-mustache",
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery" : "$",
    "jquery-validation": {
        "exports": "null",
        "depends": [ "jquery" ]
    }
  }
}

npm install はすべて正常に動作しますが、js ファイルで validate を呼び出そうとすると、関数が未定義であるというエラーが表示されます。約半ダースのスタックオーバーフローの質問を見てきましたが、私の問題は解決していません。js ファイルで require('jquery-validation') を呼び出す必要があるかどうかはわかりませんが、validate が jquery オブジェクトに追加されることを期待していました。

var $ = require('jquery');
var ajax = require('./ajax.js');

var constraints = {
    rules: {
        email: {
            required: true,
            email: true
        },
        displayName: "required",
        password: {
            required: true,
            minlength: 6,
            pattern: "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).+$"
        }
    },
    messages: {
        required: "Email not provided",
        email: "this ain't no email"
    },
    displayName: {
        required: "display name required"
    },
    password: {
        required: "password required",
        minlength: "not long enough",
        pattern: "isn't complicated enough"
    },
    submitHandler: function($form) {

        var data = extractData($form);

        ajax.send({
           type: 'POST',
           url: '/register',
           data: data,
           error: function() {
               console.log('failed to register');
           }
        });

        function extractData($form) {
            return {
                email: $form.find('#email').val(),
                displayName: $form.find('#displayName').val(),
                password: $form.find('#password').val()
            };
        }
    }
};

function registration(e) {
    e.preventDefault();

    $('#registration-form').validate(constraints);
}

module.exports = {
    selector: '#registration-form',
    registration: registration
};

誰もが同様の問題/これを解決する方法のアイデアを持っていましたか? validate.js を使用することもできますが、可能であれば jquery プラグインを使用することをお勧めします。

ありがとう

4

2 に答える 2

1
  • ノードと互換性があるため、jquery をシムする必要はありません。
  • jquery.validate をシムするには、js ファイルへのパスを指定する必要があります。
  • js コードで jquery-validation を要求する必要があります。

パッケージ.json

{  
   "main":"./js/main.js",
   "browser":{  
      "jquery-validation":"./node_modules/jquery-validation/dist/jquery.validate.js"
   },
   "browserify-shim":{  
      "jquery-validation":{  
         "depends":[  
            "jquery:jQuery"
         ]
      }
   },
   "browserify":{  
      "transform":[  
         "browserify-shim"
      ]
   },
   "dependencies":{  
      "jquery":"^2.0.0",
      "jquery-validation":"^1.15.1"
   },
   "devDependencies":{  
      "browserify":"^13.1.0",
      "browserify-shim":"^3.8.12"
   }
}

注: jquery.validate は jQuery バージョン 2.0^ (jquery-validation の npm パッケージの package.json ファイルで確認できます) に依存するため、プロジェクトで jquery ^2.0 への依存関係を設定する必要があります。バージョンの jQuery と統合は機能しません。

main.js

var $= require("jquery");
require("jquery-validation");

console.log("jquery loaded ?", $ instanceof Function);
console.log("jquery.validate loaded?", $().validate instanceof Function);

次に、package.json のローカル フォルダーで次のようにします。

すべての依存関係がインストールされていることを確認します。

npm install

バンドル ファイルをビルドするには:

browserify . -o ./js/bundle.js

bundle.js をブラウザで実行してコンソールを見ると、次のように表示されます。

jquery loaded ? true
jquery.validate loaded? true

注: "depends":["jquery:jQuery"]jquery.validation がパッケージ "jquery" に依存しており、グローバル変数 jQuery でそれを見つけることが期待されることを意味します。一部のまれな jquery プラグインでは、代わりに tu put $ が必要になります。

確信が持てない場合は、ロードする jquery プラグインのコードを確認できます。

function ($) {
 //Plugin code
}(jQuery);

必要になります"depends":["jquery:jQuery"]

function ($) {
 //Plugin code
}(windows.$);

必要になります"depends":["jquery:$"]

于 2016-10-22T22:05:29.307 に答える