extjs表单FormPanel验证

extjs表单FormPanel验证

EXT正则表达式prototype浏览器

在Extjs中，FormPane表单提供了各种各样的验证，先总结一下

在讲解表单验证前需要说一下和其相关的一下设置

//在onReady的function（{}）添加以下两行代码，
Ext.QuickTips.init();   //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side';         //指示错误出现的方式，包含的值为

qtip-当鼠标移动到控件上面时显示提示  //默认值为qtip，使用此种方式必须声明Ext.QuickTips.init();   进行初始化
title-在浏览器的标题显示

under-在控件的底下显示错误提示
side-在控件右边显示一个错误图标，鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中

表单项的显示错误的方式也可以修改各项的msgTarget属性

例如：

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

上面说了下和表单验证相关的一些设置，我们现在来看一下和表单验证相关的属性及他们验证的顺序

1。和表单验证相关的熟悉及验证顺序（注意我们只说一些常用的，其他的情况属性请看相关的API）

1.1是否为空

allowBlank : Boolean
blankText : String

1.2输入数据长度限制

minLength : Number
minLengthText : String
maxLength : Number
maxLengthText : String

1.3使用vtype验证

vtype : String
vtypeText : String

1.4使用validator编写自定义函数验证

validator : Function

1.5使用自己编写的正则表达式regex

regex : RegExp
regexText : String

从上面可以看出Extjs提供了相当灵活的验证方式，并且提供了从简单到复杂的验证，可以根据项目的具体需要而进行选择使用那些验证方式

根据本人的爱好，更喜欢使用vtype验证，在Ext.form.VTypes中提供了几个常用的验证方式，在表单中只需要写下 vtype:'email'，即可进行email信息的验证，而不需要写一大堆的正则表达式和相应的错误提示信息。如果Ext.form.VTypes默认的选项不能满足用户的需求，还可以进行扩展，当业务逻辑发生变化时只需要修改一处即可。

下面代码是扩展Ext.form.VTypes方式，希望启动抛砖引玉作用

//扩展VTypes增加id验证方式,和年龄验证
Ext.apply(Ext.form.VTypes,{
        'age' : function(_v){
            if(/^\d+$/.test(_v)){//判断必须是数字
                var _age = parseInt(_v);
                //增加业务逻辑,小于100的数字才符合年龄
                if(0 < _age && _age <100){
                    return true ;
                }
            }
            return false ;
        },
        ageText : '年龄必须为数字，并且不能超过100岁，格式为23' , //出错信息后的默认提示信息
    ageMask:/[0-9]/i  //键盘输入时的校验
})


Ext.onReady(function(){
    Ext.QuickTips.init();  //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
    Ext.form.Field.prototype.msgTarget='side';
    var form = new Ext.form.FormPanel({
            frame : true ,
            defaultType : 'textfield' ,
            buttonAlign : 'center' ,
            labelAlign : 'right' ,
            labelWidth : 70 ,
            items : [
                {
                    xtype : 'textfield',
                    fieldLabel : '编号' ,
                    name : 'id' ,
                    allowBlank : false ,
                    msgTarget : 'qtip'
                },
                {
                    fieldLabel : '名称' ,
                    name : 'name' ,
                    regex : /[\u4e00-\u9fa5]/,     //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
                    regexText:"只能输入中文!",       //正则表达式错误提示
                    allowBlank : false             //此验证依然有效.不许为空.
                },{
                    fieldLabel : '年龄' ,
                    name : 'age',
                    allowBlank : false ,
                    /*
                    minLength : 1 ,
                    minText: '最少输入1位数字',
                    maxLength : 3 ,
                    minText: '最多输入3位数字',
                    */
                    vtype : 'age'//,
                    //vtypeText : '覆盖age默认的错误提示'
                }
            ] ,
            buttons : [
                {
                    text : '确定' ,
                    handler : function(){
                        form.getForm().isValid();
                    }

                }
            ]

    });

});