Question

我有一组动态添加的对象，我想验证这个数组是否需要字段和数值。我有3个按钮，一个用于添加注释，另一个用于删除注释，另一个用于保存

如何验证每个对象？

..代码：

    $(function () {
                var initialData = [{
                    Title: "",
                    NoteText: "",
                    Suggestion: "",
                    MediaTime: ""
                }];

                var CreateNewNoteModel = function (Notes) {
                    var self = this;
                    self.Notes = ko.observableArray(ko.utils.arrayMap(Notes, function (Note) {
                        return { Title: Note.Title, NoteText: Note.NoteText, Suggestion: Note.Suggestion, MediaTime: Note.MediaTime };}; 

                    }));
                    var i = 1;
                    self.addNote = function () {
                        self.Notes.push({
                            Title: "", NoteText: "", Suggestion: "", MediaTime: ""
                        });
                        $('#editor' + i).wysihtml5();
                        $('#editorB' + i).wysihtml5();
                        i++;
                    };

                    self.removeNote = function (Note) {
                        self.Notes.remove(Note);
                    };


                    self.save = function () {

                        self.lastSavedJson(JSON.stringify(ko.toJS(self.Notes), null, 2));

                        var jsondata = self.lastSavedJson();
                        $.ajax({
                            url: "/api/Notes/?mid=" + m + "&p=" + p,
                            cache: false,
                            type: 'Post',
                            dataType: 'json',
                            contentType: 'application/json; charset=utf-8',
                            data: jsondata,
                            success: function () {
                                alert("Success");
                                document.location.reload(true);
                            }
                        });


                    };
                    self.lastSavedJson = ko.observable("")
                };
                ko.applyBindings(new CreateNewNoteModel(initialData));
            });

Answer 1

我正在使用jQuery validate插件通过使用jQuery的验证方法为knockout-js添加验证：“$ .validator.addMethod”和“$ .validator.addClassRules”。

示例：

首先定义验证方法和css类。稍后，我们将css类添加到您的输入中以验证您的字段。

function DefineValidationRules() {
    $.validator.addMethod("validateNumber", ValidateInteger, "This field is not a number");
    $.validator.addMethod("validateRequired", $.validator.methods.required, "This field is required");
    $.validator.addMethod("validateMin", $.validator.methods.min, $.format("This number be greater than or equal to {0}"));
    $.validator.addMethod("validateMax", $.validator.methods.min, $.format("This number must be less than or equal to {0}"));
    $.validator.addMethod("validateMinlength", $.validator.methods.minlength, $.format("This field must contain at least {0} characters"));
    $.validator.addMethod("validateRangelength", $.validator.methods.rangelength, $.format("This field must contain between {0} and {1} characters"));

    $.validator.addClassRules("validate-number", { validateNumber: true });
    $.validator.addClassRules("validate-number-min", { validateNumber: true, validateMin: 1 });
    $.validator.addClassRules("validate-required-number-min", { validateRequired: true, validateNumber: true, validateMin: 1 });
    $.validator.addClassRules("validate-required", { validateRequired: true });
    $.validator.addClassRules("validate-rangelengthmax6", { validateRangelength: [0,6] });
}

DefineValidationRules();

您还可以添加自己的自定义验证方法：

    function ValidateInteger(value) {
        //do whatever you want to check
    }

在淘汰赛中输入：

<input class="validate-required validate-number" type="text" data-bind="value: examplefield, valueUpdate: 'afterkeydown', attr: { attrname: 'itsvalue'}"  />

检查提交：

$("#yoursubmitbutton").on("click", function () {
    var formtosubmit = $("#idofyourform");

    //check for validation errors
    if (isValid(formtosubmit)) {
        formtosubmit.submit();
        //
        // code to proceed to next step
    }
});

function isValid(el) {
    var $thisform = el;
    $thisform.validate({
        errorElement: "label",
        errorPlacement: function (error, element) {
            //eventual different error placing
            if (element.attr("name") == "fname" || element.attr("name") == "lname") {
                element.css("border", "2px solid red");
                error.insertAfter("#lastname");
            } else {
                error.insertAfter(element);
            }
        }
    });
    return $thisform.valid();
}

对象数组的敲除验证

1 个答案: