Question

我正在尝试在提交前验证表单。为此，我在View中定义了一个create方法，它负责调用collection.create（）方法来创建模型。

以下是示例代码：

app.ContactCreateView = Backbone.View.extend({
    template: _.template($('#tpl-create-contact').html()),
    initialize: function () {
      this.router = new app.ContactsRouter();
      this.contacts = new app.ContactsCollection();
    },
    events: {
      'click #btn-create' : 'create',
      'click #btn-cancel' : 'cancel',
    },
    render: function() {
      this.$el.html(this.template());
      return this;
    },
    getAttributes: function () {
      console.log('getAttributes()');
      var attr = { 
        name: $('#input-name').val().trim(),
        category: $('#input-category').val().trim(),
        phone: $('#input-phone').val().trim(),
        email: $('#input-email').val().trim(),
      };
      console.log('attr : ' + JSON.stringify(attr))
      return attr;
    },
    create: function () {
      console.log('create()');
      // Create the Model
      this.contacts.create(this.getAttributes(), {
        wait : true,      
        success: function () {
          console.log('success');
          //this.hideErrors();
          var router = new app.ContactsRouter();
          router.navigate('contacts', true);
        },
        error: function () {
          console.log('error(s)')
          //this.showErrors(errors);
        }
      });

    },

很好地调用了'success'回调，但是一旦model.validate（）方法失败，我就无法调用'error'回调。

以下是使用验证方法的模型：

app.ContactModel = Backbone.Model.extend({
    urlRoot: '/user',
    // Default attributes for the Contact
    defaults: {
      name: null,
      phone: null,
      email: null,
      category: null,
      photo: "/images/placeholder.png"
    },
    validate: function(attrs) {
      console.log('validate() : ' + JSON.stringify(attrs));
      var errors = [];
      if (!attrs.name) {
        errors.push({name: 'name', message: 'Please fill name field.'});
      }
      if (!attrs.category) {
        errors.push({name: 'category', message: 'Please fill category field.'});
      }
      console.log('errors : ' + JSON.stringify(errors));
      return errors.length > 0 ? errors : false;
    }
  });

收集：

  app.ContactsCollection = Backbone.Collection.extend({
    model: app.ContactModel,
    url: '/user',
    //localStorage: new Backbone.LocalStorage('contacts-backbone'),

    getById: function (iId) {
        return this.where({id: iId});
    },
    getByName: function (iName) {
        return this.where({name: iName});
    }
  });

我真的不明白我做错了什么......如果有人可以帮助我:-( 的问候，

Answer 1

当验证失败时，不会调用错误回调，它会触发＆＃34;无效＆＃34;模型上的事件，并在模型上设置validationError属性。

方法1（听模型）：

app.ContactModel = Backbone.Model.extend({
    urlRoot: '/user',
   //your error catched here
   initialize : function(){
        this.on("invalid",function(model,error){
            alert(error);
        });
    defaults: {
      name: null,
      phone: null,
      email: null,
      category: null,
      photo: "/images/placeholder.png"
    },
    validate: function(attrs) {
      console.log('validate() : ' + JSON.stringify(attrs));
      var errors = [];
      if (!attrs.name) {
        errors.push({name: 'name', message: 'Please fill name field.'});
      }
      if (!attrs.category) {
        errors.push({name: 'category', message: 'Please fill category field.'});
      }
      console.log('errors : ' + JSON.stringify(errors));
      return errors.length > 0 ? errors : false;
    }
  });

方法2（检查视图中是否设置了validationError属性）：

     create: function () {
      console.log('create()');
      // Create the Model
      this.contactModel.save(this.getAttributes(), {
        wait : true,      
        success: function () {
          console.log('success');
          this.contacts.add(this.contactModel);
          var router = new app.ContactsRouter();
          router.navigate('contacts', true);
        },
        error: function () {
          console.log('error(s)')
        }
      });
      //your error catched here
      if (this.contactModel.validationError) {
      alert(this.contactModel.validationError)
    }
    },

Answer 2

所以我在一个我正在研究的应用程序中玩了一段时间，发现它有点刺激，从来没有真正让它起作用。

相反，我走了jQuery validation路线，发现它对验证很有帮助。我强烈建议您查看它！它有许多你可以使用的内置验证，你也可以覆盖显示的错误信息（也是内置的）。

示例 - 我想要一个仅限数字的文本字段（请原谅coffeescript）:)。

jQuery.validator.setDefaults(
            debug: true,
            success: "valid")
        if @model.get('number_only')
            $('#number_only').validate({
                debug: true,
                rules: {
                    "number[entry]": {
                        required: true,
                        range: [@model.get('min_number'), @model.get('max_number')],
                        number: true
                    }
                },
                messages: {
                    "number[entry]": {
                        required: "This field is required. Please enter a numeric value.",
                        min: jQuery.validator.format("Please enter a value greater than or equal to {0}."),
                        max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
                        number: "Please enter a numeric value"
                        range: jQuery.validator.format("Please enter a value between {0} and {1}.")
                    }
                }
            })

如果这没有真正得到你想要的东西（似乎你可能更感兴趣的是显示你的服务器发回的错误，而这条路线会在保存你的模型之前更多地验证内容）告诉我，我可以看到如果我能弄清楚你的问题。

如何使用collection.create（）验证模型

2 个答案: