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);
    });
}