1

私は Jquery バリデータ プラグインに精通しているわけではありません。単一のテキスト フィールドを検証できるかどうか、つまりテキスト フィールドにパスワードを入力し、それが「パスワード」(またはその他のもの) と等しいかどうかを調べようとしています。パスワードは可能性があります)、ダウンロード リンクが表示されます。
ここに jsfiddle があります: http://jsfiddle.net/aSRRr/
ここにも jQuery があります:

$.validator.setDefaults({
submitHandler: function(form){
$("#myform").hide();
$("#download-file").fadeIn("slow");
},
}); 


  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    password: { required: true, equalTo: "#password"},
  }

});

  });


$(document).ready(function(){
$("#myform").hide();
$("#download-file").hide();

$("#download-button").click(function(){
$("#myform").fadeToggle(300);
});
});

テキスト フィールドを単語 (この場合は「パスワード」) に対して検証することは可能ですか?

4

2 に答える 2

2

addMethod関数http://docs.jquery.com/Plugins/Validation/Validator/addMethodを使用します。

カスタム検証メソッドを追加します。これは、名前 (有効な JavaScript 識別子である必要があります)、JavaScript ベースの関数、およびデフォルトの文字列メッセージで構成されている必要があります。コールバックへの引数は次のとおりです。 - 検証された要素の現在の値

  • 検証される要素
  • メソッドに指定されたパラメーター。たとえば、min: 5 の場合、パラメーターは 5、range: [1, 5] の場合、その [1, 5]

注意: パラメータを値と照合する正規表現メソッドを追加したくなる誘惑にかられますが、これらの正規表現を独自のメソッド内にカプセル化する方がはるかにクリーンです。わずかに異なる式がたくさん必要な場合は、共通のパラメーターを抽出してみてください。

マークアップ:

<div id="download-button" style="cursor: pointer;">Download File</div>

<form id="myform">
  <label for="password">Password</label>
  <input id="password" name="password" class="isPassword" />
  <br/>

  <input class="submit" type="submit" value="SUBMIT" />
</form>

<div id="download-file" style="cursor: pointer;">Click to Download</div>

jQuery:

$.validator.setDefaults({
    submitHandler: function(form){
        $("#myform").hide();
        $("#download-file").fadeIn("slow");
    },
}); 
$(document).ready(function(){
    jQuery.validator.addMethod("isPassword", function(value) {
        if(value == 'password')
              return true;
          }, "Invalid password");
    $("#myform").validate();
    $("#myform").hide();
    $("#download-file").hide();
    $("#download-button").click(function(){
        $("#myform").fadeToggle(300);
    });
});

入力でクラス isPassword が使用されていることを確認してください。.readyまた、コードから余分な関数を削除してください。

jsFiddle: http://jsfiddle.net/aSRRr/2/

于 2013-02-25T22:26:34.413 に答える
1

重要な注意: これは安全ではありません。 誰でも簡単に JavaScript コードを表示し、パスワードの値を見ることができます。

以下はあなたの質問への回答ですが、何かを保護するための信頼できる方法としてこれをお勧めしません.

jQuery Validate プラグインの組み込みaddMethodメソッドを使用して、pw_check次のように呼び出されるカスタム ルールを作成します。

jQuery.validator.addMethod("pw_check", function (value) {
    return (value == 'password');
}, "Invalid password");

次に、他のルールとともに新しいルールを適用します...

rules: {
    password: {
        required: true,
        pw_check: true // <-- apply your custom rule
    }
},

完全に更新された jQuery コード:

$(document).ready(function () {

    jQuery.validator.addMethod("pw_check", function (value) {
        return (value == 'password');
    }, "Invalid password");

    $("#myform").validate({
        rules: {
            password: {
                required: true,
                pw_check: true
            }
        },
        submitHandler: function (form) {
            $("#myform").hide();
            $("#download-file").fadeIn("slow");
        }
    });

    $("#myform").hide();
    $("#download-file").hide();

    $("#download-button").click(function () {
        $("#myform").fadeToggle(300);
    });

});

HTML に変更はありません。

動作デモ: http://jsfiddle.net/5WMNK/

于 2013-02-25T22:51:15.887 に答える