ExtJS 数据处理-Validations（验证器）

2022-07-21 08:36:25 阅读：272 来源： 互联网

标签：name 验证 Validations Ext 实例 validators 数据处理 type ExtJS

更新记录
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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9