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
事件,因为这是不正确的,因为它尚未完全验证。