ExtJS 的表单验证机制(Form Validation)

最新推荐文章于 2021-08-05 22:16:08 发布

原创最新推荐文章于 2021-08-05 22:16:08 发布 · 7.5k 阅读

5 ·

CC 4.0 BY-SA版权

ExtJS 专栏收录该内容

9 篇文章

订阅专栏

本文总结了ExtJS中的表单验证机制，包括错误提示配置、空值验证、长度限制、vtype验证、自定义vtype验证器以及正则表达式验证。通过msgTarget属性可以定制错误提示方式。

在 Extjs 中，表单(form)提供了各种各样的验证机制和方法，在这里总结一下

在讲解表单验证前需要先说一下错误提示(Tips)的配置

在 Ext.onReady 中添加以下两行代码：

//初始化组件的信息提示功能
Ext.QuickTips.init();
//指示错误提示出现的方式
Ext.form.Field.prototype.msgTarget = 'under';

msgTarget 可以是以下选项：
qtip 当鼠标移动到控件上面时显示提示
title 在浏览器的标题显示
under 在控件的底下显示提示
side 在控件右边显示一个错误图标，鼠标指向图标时显示提示
id 提示显示在指定id的HTML元件中

各表单元素的提示方式也可以通过修改各项的 msgTarget 属性来配置

{  
    xtype      : 'textfield',  
    fieldLabel : '编号' ,  
    name       : 'id' ,  
    allowBlank : false ,  
    msgTarget  : 'qtip'  
}

各种各样的表单验证类型

1，空值验证

//是否允许空值
allowBlank : false
//发生空值错误时的提示
blankText : '不能为空'

2，长度限制

//最小长度限制和其错误提示
minLength : Number 
minLengthText : String
//最大长度限制和其错误提示 
maxLength : Number 
maxLengthText : String

3，vtype验证

vtype : 'email' 
vtypeText : '不是有效的邮箱地址'

其中 vtype 的可选：
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum //只能输入字母和数字，无法输入其他
3.email //email验证，要求的格式是 "langsin@gmail.com"
4.url //url格式验证，要求的格式是 http://www.langsin.com

4，自定义vtype验证器

//先用 Ext.apply 方法添加自定义的 password 验证器  
Ext.apply(Ext.form.VTypes,{  
    password : function(val,field){             //val指的是文本框的值，field指的是文本框组件
        if(field.confirmTo){                    //confirmTo是我自定义的配置参数，一般用来保存另一个组件的id  
            var pwd=Ext.get(field.confirmTo);   //取得confirmTo组件的值  
            return (val==pwd.getValue());  
        }  
        return true;  
    }  
});
//配置items参数  
items:[  
    {  
        fieldLabel  : "密码",  
        id          : "pass1",  
    },{  
        fieldLabel  : "确认密码",  
        id          : "pass2",  
        vtype       : "password",//自定义的验证类型  
        vtypeText   : "两次密码不一致！",  
        confirmTo   : "pass1",//要比较的另外一个的组件的id  
    }  
]

5，使用正则表达式 RegExp

//js的正则表达式放在 /...../ 之间；[/u4e00-/u9fa5]表示只能输入中文
regex       : /[/u4e00-/u9fa5]/,    
regexText   : "只能输入中文!",