0

jQuery、より具体的には javascript に関する私の知識は常に非常に限られており、より良くなるために懸命に取り組んでいます。

そのことを念頭に置いて、検証関数とそのエラーメッセージを含むオブジェクトを作成し、それを配列にプッシュしてから、それらすべてのメソッドを呼び出してからのメッセージを報告できるという点で、ある種の「拡張可能な検証フレームワーク」を作成しようとしています。失敗するもの。

最初に、基本的な検証が機能することを確認するために、非常に単純なことを行いました。これは次のとおりです。

var selectedTourDate = $("#tourDate").val();
var list = $("#bookedTourDate *");

var isDateBooked = list.filter(function () {
    return (this.innerHTML == selectedTourDate) ;
}).length !== 0;

if (isDateBooked) {
    alert("Date invalid");
    return;
}

これはうまくいきます。

次に、「フレームワーク」を作成しました。これは次のとおりです。

function Validator(fn, errorMessage) {
    this.validationFunction = fn;
    this.errorMessage = errorMessage;
};

var validationRunner = {
    validators: [],
    errorMessages: [],
    validationResult: true,

    addValidation: function (validator) {
        validationRunner.validators.push(validator);
    },

    validate: function () {
        for (var validator = 0; validator < validationRunner.validators.length; validator++) {
            if (validationRunner.validators[validator] instanceof Validator) {
                var result = validationRunner.validators[validator].validationFunction();
                validationResult = validationRunner.validationResult && result;

                if (!result)
                    validationRunner.errorMessages.push(validationRunner.validators[validator].errorMessage);
            }
        }
    },

    getErrorMessage: function () {
        var message = "<ul>";

        for (var errorMessage = 0; errorMessage > validationRunner.errorMessages.length; errorMessage++) {
            message += "<li>" + errorMessage + "</li>";
        }

        message += "</ul>";
        return message;
    }
}

次に、コードの最初のブロックを次のように変更します。

var selectedTourDate = $("#tourDate").val();
var list = $("#bookedTourDate *");

var tmp = new Validator(function () {
    return list.filter(function () {
         return (this.innerHTML == selectedTourDate);
    }).length !== 0;
}, "Date already booked");

validationRunner.addValidation(tmp);
validationRunner.validate();
var msg = validationRunner.getErrorMessage();

これはまったく機能しません。

問題は、このステートメントの次の点にあるようです。

return (this.innerHTML == selectedTourDate);

「this」は、「filter」メソッドの関数の内部にあるはずなので、リストのhtml要素ではなくValidatorオブジェクトです。

ここでやろうとしていることを達成できるように、これを修正する方法はありますか?

4

2 に答える 2

1

thisは正しい値を持っていますが、 にいくつかの誤りがありgetErrorMessage functionます。

の値を確認するthisには、デバッガーの「ウォッチ変数」機能に頼るのではなくconsole.log、コード実行の特定の時点での値を取得します。

私の変更：

    for (var errorMessage = 0; errorMessage < validationRunner.errorMessages.length; errorMessage++) {
        message += "<li>" + validationRunner.errorMessages[errorMessage] + "</li>";
    }

errorMessage変数は単なるインデックスであり、実際のエラー メッセージではありません。また、「より小さい」記号の代わりに「より大きい」を使用しました。

ここにフィドルがあります

于 2012-08-23T15:18:43.777 に答える
0

これはjquery apiごとの現在の DOM 要素である必要があるため、非常に奇妙です。

ただし、この関数はインデックスをパラメーターとして受け取る必要があります。では、試してみてはどうでしょうか

return list.filter(function (i) {
  return (list.get(i).innerHTML == selectedTourDate);
}).length !== 0;
于 2012-08-23T15:20:11.530 に答える