Question

这是我的第一个真正的骨干项目，我在业余时间努力工作以更好地感受这一切。表单验证让我有点困惑。

我想我在这里正确设置了模型：

var User = Backbone.Model.extend({
    defaults: {
        "firstname": "",
        "lastname": "",
        "age": null
    },
    url: '/UMA.Service/Service1.svc/',
    validate: function(attr) {
        var errors = [];
        if (!attr.FirstName) {
            errors.push({name: 'firstname', message: 'Please fill in first name field.'});
        }
        if (!attr.LastName) {
            errors.push({name: 'lastname', message: 'Please fill in last name field.'});
        }
        if(!attr.Age) {
            errors.push({name: 'age', message: 'Please fill in age field.'})
        }

        return errors.length > 0 ? errors : false;
    }
});

我现在不确定如何在我的视图中实现它。我目前拥有它，以便当我点击提交按钮时它.save()，但我希望它检查表单是否有错误。如果有错误，则提示用户并留在页面上。如果不是那么.save()。

以下是我的观点现在的设置方式：

var EditUser = Backbone.View.extend({
    el: '.page',
    render: function() {
        var template = Handlebars.compile($('#edit-user-template').html());
        this.$el.html(template);
    },

    events: {
        'submit .edit-user-form': 'saveUser',
        'click #new-user-cancel': 'cancelNewUser'
    },

    saveUser: function (ev) {
        var me = this;
        var user = new User();
        var firstName = $('.edit-user-form #firstname').val();
        var lastName = $('.edit-user-form #lastname').val();
        var age = $('.edit-user-form #age').val();

        user.save({
            FirstName: firstName,
            LastName: lastName,
            Age: age
        },{
            success: function(user) {
                router.navigate('', {trigger: true});
            }
        });
    },

    cancelNewUser: function() {
        userList.fetchUsers();
        router.navigate('', {trigger: true});
    }

});

我确信我必须做些工作。是否有人能够指出我正确的教程方向或帮助我以正确的方式将错误传递给我的观点？谢谢！

Answer 1

Backbone有一个让它变得非常简单的插件，请参阅https://github.com/thedersen/backbone.validation

她是一个简单的代码，只是为了展示它是如何工作的。（CoffeeScript）

在模型中

validation:
   Age:
     required: true
     min: 18
     msg: 'Invalid Age.'

saveNewClient:-> 
    performValidation = true
    if @isValid(performValidation)
        @save()

如果您为验证函数建模，当您调用方法（isValid(true)）时，骨干将执行所有验证，如果出现问题，则无法保存。

尝试阅读有关此插件的信息，上面的代码只是一个简单的例子。

希望它有所帮助。

Answer 2

saveUser:function(e){

    var me = this;
    var user = new User();
    var firstName = $('.edit-user-form #firstname').val();
    var lastName = $('.edit-user-form #lastname').val();
    var age = $('.edit-user-form #age').val();
    user.set({
        FirstName: firstName,
        LastName: lastName,
        Age: age
    });

if (!user.isValid()) {
                alert("Validation Errors, please fix");
                return; //Do not save
            }else{
      save();      //write the save logic here
   }

}

文档 - http://backbonejs.org/#Model-isValid

Answer 3

我能够通过保持模型的相同方式解决这个问题，然后在我的视图中添加此功能进行验证：

userError: function(e){
        var validationError = e['validationError'];
        var errorContainer = $('#error-container');
        _.each(validationError, function(obj){
            var errorFocus = this.$('#' + obj.name);
            errorFocus.parent().addClass('has-error');
            errorContainer.append('<span id="' + obj.name + '-message">' + obj.message + '<br></span>');
        });

        errorContainer.removeClass('hide').hide().slideDown();
    },

骨干表单验证

3 个答案: