ExtJS 数据处理-Validations(验证器)
作者:互联网
更新记录
2022年7月21日 发布。
2022年7月16日 从笔记迁移到博客。
ExtJS教程汇总:https://www.cnblogs.com/cqpanda/p/16328016.html
Validations(验证器)
验证器说明
模型支持模型数据的验证
定义验证在模型中使用validators属性即可
validators: {
//单个验证条件
'字段名称': '验证类型',
//单个验证条件(详细)
'字段名称': { type: '验证条件2', 附加Key: 附加Value },
//多个验证条件
字段名称: [
{ type: '验证条件1' },
{ type: '验证条件2', 附加Key: 附加Value }
]
}
ExtJS预定义的验证器
以下是ExtJS预定义的验证器
presence: 这确保特定字段存在一个值,即:非空(not null)、非空字符串''
length: 验证数据的长度,配合最大(max)和最小(min)长度使用
inclusion: 验证数据包含在指定的集合中(list of values),配合list使用
exclusion: 验证数据不在指定的集合中(list of values),配合list使用
email 验证数据邮箱地址
format 验证数据正则表达式,配合matcher使用
range 验证数据的范围,配合最大(max)和最小(min)长度使用
模型类型的实例,可以使用isValid()方法,检测模型中的数据是否满足验证条件:
modelInstance.isValid()
模型验证器内部结构
实例:
实例:验证数据不为空(presence)
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id',type: 'int',convert: null },
{ name: 'firstName', type: 'string' }
],
validators: {
firstName: [
{ type: 'presence' },
{ type: 'length', min: 2 }
]
}
});
实例:验证数据长度(length)
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ...,
validators: {
name: [
{ type: 'length', min: 7 },
]
}
});
实例:验证数据排除(exclusion)
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ...,
validators: {
name: [
{ type: 'exclusion', list: ['Bender'] }
]
}
});
实例:验证数据包含(inclusion)
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ...,
validators: {
name: [
{ type: 'inclusion', list: ['Bender'] }
]
}
});
实例:验证数据满足正则(format)
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id',type: 'int',convert: null },
{ name: 'phoneNumber', type: 'string' },
],
validators: {
phoneNumber: {
type: 'format',
matcher: '/^[(+{1})|(00{1})]+([0-9]){7,10}$/'
}
}
});
实例:验证性别
gender: {
type: 'inclusion',
list: ['男', '女']
},
实例:单字段多个验证器
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ...,
validators: {
name: [
'presence',
{ type: 'length', min: 7 },
{ type: 'exclusion', list: ['Bender'] }
]
}
});
实例:多个字段验证器
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id',type: 'int',convert: null },
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string'},
{ name: 'fulltime', type: 'boolean', defaultValue: true, convert: null },
{ name: 'gender', type: 'string' },
{ name: 'phoneNumber', type: 'string' },
],
validators: {
firstName: [
{ type: 'presence' },
{ type: 'length', min: 2 }
],
lastName: [
{ type: 'presence' },
{ type: 'length', min: 2 }
],
phoneNumber: {
type: 'format',
matcher: '/^[(+{1})|(00{1})]+([0-9]){7,10}$/'
},
gender: {
type: 'inclusion',
list: ['Male', 'Female']
},
}
});
实例:定义模型验证并实例化模型并验证数据是否符合要求
//定义模型
Ext.define('Student',{
extend: 'Ext.data.Model',
fields: [
{name:'id', type:'int'},
{name:'name',tyle:'string'}
],
validators: {
id:'presence',
name: { type:'length',min: 3 }
}
});
//创建实例
var studentData = Ext.create('Student',{
id:666,
name:'panda'
});
//验证模型的数据是否有效
if(studentData.isValid())
{
var id = studentData.get('id');
var name = studentData.get('name');
console.log(id);
console.log(name);
}
else
{
console.log('student data is not valid');
}
实例:验证模型数据是否有效
//定义模型
Ext.define('User',{
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
'name',
'age'
],
validators: { //定义验证器
name: 'presence',
age: [
{type: 'presence',min: 3, max: 4},
]
}
})
//创建模型实例
var user = Ext.create('User',{
id: 666,
name: 'panda',
age: 666
});
//验证是否有效数据
console.log(user.isValid());
实例:获得验证错误信息
注意:validate()方法返回的类型是Ext.data.ErrorCollection
if (myclient.isValid()){//Step 4
console.log("myclient model is correct");
}
else{
//Step 5
console.log("myclient model has errors");
//获得错误信息
var errors = myclient.validate();
errors.each(function(error){
console.log(error.field,error.message);
});
}
标签:name,验证,Validations,Ext,实例,validators,数据处理,type,ExtJS 来源: https://www.cnblogs.com/cqpanda/p/16483295.html