Javascript 使用主干验证插件有选择地验证模型属性?

Javascript 使用主干验证插件有选择地验证模型属性?,javascript,validation,backbone.js,backbone.validation.js,Javascript,Validation,Backbone.js,Backbone.validation.js,我正在使用,并且希望在不同的时间选择性地验证不同的模型属性集,这可能吗 我的测试模型对姓名、年龄和地址进行了验证,如果我只想验证地址,我该怎么做 我认为这是一个调用this.model.validate('address')的案例但是所有的验证规则似乎都在运行 JS console.clear(); const Model = Backbone.Model.extend({ validation: { name: { required: true

我正在使用,并且希望在不同的时间选择性地验证不同的模型属性集,这可能吗

我的测试模型对
姓名
年龄
地址
进行了验证,如果我只想验证
地址
,我该怎么做

我认为这是一个调用
this.model.validate('address')的案例但是所有的验证规则似乎都在运行

JS

    console.clear();


const Model = Backbone.Model.extend({
    validation: {
    name: {
        required: true
    },
    age: {
      range: [1, 80],
      required: true
    },
    address: {
        minLength: 1,
        msg: 'Address required',
      required: false
    }
  }
});
const View = Backbone.View.extend({

    template: Handlebars.compile( $('.tmpl-person').html() ),

    className: 'view',

    events: {
        'click .js-action--validate-keys': 'actionValidateKeysClicked',
        'click .js-action--validate-key': 'actionValidateKeyClicked'
    },

    initialize() {
        Backbone.Validation.bind(this);

        this.listenTo(this.model, 'validated', this.onModelValidated, this);
        this.listenTo(this.model, 'validated:valid', this.onModelValid, this);
        this.listenTo(this.model, 'validated:invalid', this.onModelInvalid, this);
    },

    render() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    actionValidateKeysClicked(event) {
        event.preventDefault();
        console.log('actionValidateKeysClicked');

        this.model.set({
            'name': 'Joe Bloggs',
            'age': 23
        });

        this.model.validate(['name', 'age']);
    },

    actionValidateKeyClicked(event) {
        event.preventDefault();
        console.log('actionValidateKeyClicked');
        this.model.set('address', '123 ABC');
        this.model.validate('address');
    },

  /**
   *    The validated event is triggered after validation is performed, either it was successful or not.
   *    isValid is true or false depending on the result of the validation.
   */
  onModelValidated(isValid, model, errors) {
    console.log('onModelValidated', isValid, model, errors);
  },

  onModelValid(model) {
    console.log('onModelValid', model);
  },

  onModelInvalid(model, errors) {
    console.log('onModelInvalid', model, errors);
  }
});

const newModel = new Model();
const newView = new View({
    model: newModel
});


document.body.append(newView.render().el);
JSFIDLE

有效
为了仅验证某些字段,提供了的修改版本

如果传递属性的名称或名称数组,则可以 检查属性是否有效:

// Check if name is valid
var isValid = model.isValid('name');

// Check if name and age are valid
var isValid = model.isValid(['name', 'age']);
isValid
仅当验证出错时才会触发
'invalid'
事件(),不会触发
'validated'
事件或
'validated:valid'

preValidate
有时,检查(例如在每次按键时)可能很有用 如果输入有效-不改变模型-执行一些 有点像现场验证。您可以为 通过调用
preValidate
方法,并将属性的名称和值传递给它 验证或属性散列

如果该值无效,则返回错误消息(truthy), 否则,它将返回一个falsy值

// Validate one attribute
// The `errorsMessage` returned is a string
var errorMessage = model.preValidate('attributeName', 'Value');

// Validate a hash of attributes
// The errors object returned is a key/value pair of attribute name/error, e.g
// {
//   name: 'Name is required',
//   email: 'Email must be a valid email'
// }
var errors = model.preValidate({name: 'value', email: 'foo@example.com'});
演示 我使用了您的代码,并在下面制作了一个小示例,以演示在使用
isValid
时不会触发无效事件,但在使用
validate
时会触发无效事件。另外,请注意,
preValidate
不会触发任何事件

const Model=Backbone.Model.extend({
验证:{
姓名:{
必填项:true
},
年龄:{
范围:[1,80],
必填项:true
},
地址:{
最小长度:1,
msg:'需要地址',
必填项:true
}
}
});
const View=Backbone.View.extend({
模板:$('.tmpl person').html(),
类名:“视图”,
活动:{
'click.validate':'onValidateClick',
“click.is valid':“onIsValidClick”,
“单击。预验证”:“onPreValidateClick”,
},
初始化(){
主干。验证。绑定(this);
this.listenTo(this.model{
“全部”:this.onAllModelEvent,
//“已验证”:this.onModelValidated,
//“已验证:有效”:this.onModelValid,
//“已验证:无效”:this.onModelInvalid
});
},
render(){
this.$el.html(this.template);
this.$checkbox=this.$('.invalid');
归还这个;
},
getAddress(){
返回此。$checkbox.is(':checked')?null:'123 ABC';
},
onValidateClick(){
log('validate click');
this.model.set('address',this.getAddress());
log(“validate:,this.model.validate('address'));
},
onIsValidClick(){
log('isValid click');
this.model.set('address',this.getAddress());
log(“isValid:”,this.model.isValid('address');
},
onPreValidateClick(){
console.log('preValidate click');
this.model.set('address',this.getAddress());
console.log(“preValidate:”,this.model.preValidate('address');
},
OnalModelEvent:函数(事件){
日志(“事件:”,事件);
}
});
const newModel=新模型();
const newView=新视图({
型号:新型号
});
document.body.append(newView.render().el)
*{
-webkit字体平滑:抗锯齿;
}
身体{
填充:5%;
字体大小:16px;
线高:1.4;
}
.视图{
宽度:100%;
高度:100vh;
背景:浅蓝色;
}
.btn{
大纲:无;
边界:无;
背景:#1C90F3;
边界半径:4px;
颜色:白色;
填充:15px;
}

设置“地址”并使用:
验证
有效
预先验证

使地址无效。
如果我使用这些,我如何才能利用由validation validated:valid和validated:invalid触发的事件?因此,我应该将所有验证规则设置为required:false?@styler在执行小型验证时,
isValid
应该足以处理其
invalid
事件。它不会触发
validated
事件,因为这是不正确的,因为它尚未完全验证。