主干验证插件不进行验证

Backbone validation plugin does not validate

本文关键字：验证 插件      更新时间：2023-09-26

我使用Backbone.Validation插件来验证一个简单的表单。下面是我的模型

var BuyerModel = Backbone.Model.extend({
    defaults: {
        name: '',
        age: ''
    },
    validation: {
        name: {
            required: true
        },
        age: { 
            min: 18
        }
    },
    initialize: function () {
        _.extend(Backbone.Model.prototype, Backbone.Validation.mixin);
    }
});

以下是我的观点

var BuyerModelFormView = Backbone.View.extend({
    events: {
        'click [name~="save"]': 'save'
    },
    initialize: function () {
        Backbone.Validation.bind(this);
    },
    template: _.template(''
         <form>'
               Enter name:'
               <input name="name" type="text" value="<%= name %>"><br>'
               Enter age:'
               <input name="age" type="text" value="<%= age %>"><br>'
               <input type="button" name="save" value="Save">'
        </form>' '),
    render: function () {
        var html = this.template(this.model.toJSON());
        $(this.el).html(html);
    },
    save: function () {
        console.log(this.model.toJSON());
        this.model.set({
            name: $('[name~="name"]').val(),
            age: $('[name~="age"]').val()
        });
        console.log(this.model.toJSON());
    }
});

以下是我如何使用它

    var buyerModel = new BuyerModel();
    var buyerModelFormView = new BuyerModelFormView({
        model: buyerModel,
        el: 'body'
    });
    buyerModelFormView.render();

当我在表单中输入任何内容并点击回车键时，它会更新模型，但不会验证。即使我输入的值不正确，模型仍然会更新。

我做错了什么？我该如何解决

像这样设置强制验证

this.model.set({
    name: $('[name~="name"]').val(),
    age: $('[name~="age"]').val()
}, {validate: true});

这是你想要的吗？

因为Model.set有这样的字符串

// Run validation.
      if (!this._validate(attrs, options)) return false;

和

// Run validation against the next complete set of model attributes,
// returning `true` if all is well. Otherwise, fire an `"invalid"` event.
_validate: function(attrs, options) {
  if (!options.validate || !this.validate) return true;

因此，如果你没有通过验证-它将被忽略

以这种方式检查

$(function(){
    var buyerModel = new BuyerModel();
    buyerModel.on('change', function(){
        console.log('on change', arguments);
    });
    var buyerModelFormView = new BuyerModelFormView({
        model: buyerModel,
        el: 'body'
    });
    buyerModelFormView.render();
});
相关文章：