Extjs 表单验证后，几种错误信息展示方式

今天要求对form表单验证，进行系统学习一下，故做了几个示例：

Ext.onReady(function(){
        var panel=Ext.create('Ext.form.Panel', {
           title:"test the valition"
            ,width:650
            ,layout:"anchor"
            ,renderTo:Ext.getBody()
            ,defaults:{
                margin:"5 0 8 10"
                ,labelWidth:150
                ,width:500
            }
            , defaultType: "textfield"
            ,items:[
                {xtype:"container"
                 ,html:"1.进行远程数据验证，验证不立即执行，而是当鼠标失去焦点才进行验证！"
                 }
                 ,{
                fieldLabel:"remote validation"
                ,itemId:"show"
                , xtype:'textfield'
                ,labelAlign:"left"
                ,msgTarget: 'side'
                ,validateOnChange:false       //设置该属性为false，不立即进行验证，而是当鼠标焦点离开进行验证
                ,plugins:[{ptype:"uxvalidation"}] //自定义远程验证插件，里面调用ajax方式进行后台验证，其实也可以使用validator实现相同的效果。
                ,remoteValidator: {
                    params:{
                        LoginName:"#show" //(通过itemId寻找对应控件)
                    }
                    ,url:"test.ashx"
                }
                ,listeners:{
                    errorchange:function(lbl,error){
                        var me=lbl;
                    }
                }
            }
                 ,{  xtype:"container"
                 ,html:"2.进行本地验证(提示类型为under)，错误信息将会在下面显示出来"
                 }
                 ,{
                fieldLabel:"local validation (number)"
                ,itemId:"showTwo"
                ,xtype:"textfield"
                ,labelAlign:"left"
                ,msgTarget:"under"
                ,minLength:5
                ,vtype:"number"
            }
                 ,{  xtype:"container"
                ,html:"3.本地和远程验证，只有当本地验证通过，才会调用后台验证"
            }
                 ,{
                fieldLabel:"local and remote validation"   //本地和后台都进行验证，只有当本地验证通过，才会调用后台验证
                ,itemId:"showThree"
                ,xtype:"textfield"
                ,labelAlign:"left"
                ,msgTarget:"side"
                ,vtype:"number"
                ,minLength:5
                ,plugins:[{ptype:"uxvalidation"}]
                ,remoteValidator: {
                    params:{
                        LoginName:"#showThree" //(通过itemId寻找对应控件)
                    }
                    ,url:"test.ashx"
                }
            }
                 ,{  xtype:"container"
                 ,html:"4.不立即进行验证，当鼠标失去焦点才进行验证，错误信息将以title形式提醒"
                  }
                 ,{
                fieldLabel:"Email(title)"
                ,itemId:"showFour"
                ,xtype:"textfield"
                ,labelAlign:"left"
                ,msgTarget:"title"
                ,vtype:"email"
                ,validateOnChange:false       //通过设置该属性为false ,不立即进行验证，而是当鼠标离开的时候才进行验证
            }
                 ,{  xtype:"container"
                 ,html:"5.直接使用正则进行验证，regex(而不是vtype)验证"
                 }
                 ,{
                fieldLabel:"regex validation (email)"
                ,itemId:"showFive"
                ,id:"five"
                ,xtype:"textfield"
                ,labelAlign:"left"
                ,msgTarget:"side"
                ,regex:/([a-z0-9]*[-_\.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?/i    //直接正则验证
                ,regexText:"邮件格式不正确！"
            }
                 ,{  xtype:"container"
                 ,html:"6.直接使用函数验证，validator(而不是vtype)验证"
                 }
                 ,{
                fieldLabel:"validator function (number)"
                ,itemId:"showSix"
                ,xtype:"textfield"
                ,labelAlign:"left"
                ,maskTarget:"none"
                ,vtype:"number"
                ,minLength:6
                ,validator:function(value){      //直接进行函数验证 ，也可以在里面进行远程验证
                    if(value==3)
                        return "请不要输入该数字！";
                    else
                        return true;
                }
            }
                 ,{  xtype:"container"
                 ,html:"7.直接显示错误文本信息，通过配置msgTarget为id"
                 }
                 ,{
                xtype:"container"
                ,layout:"column"
                ,width:640
                ,items:[
                    {
                        fieldLabel:"the first input"
                        ,itemId:"first"
                        ,xtype:"textfield"
                        ,labelAlign:"left"
                        ,minLength:5
                        ,msgTarget:"showText"    //通过配置id属性，改变错误信息显示的位置，直接展示文本信息
                        ,errorMsgCls:"show"
                        ,labelWidth:150
                        ,width:500
                        ,margin:"0 2 2 0"

}
                    ,{
                        xtype:"container"         //等待显示错误文本信息的容器
                        ,id:"showText"
                        ,html:"test test"
                        ,width:130
                    }
                ]

}
                 ,{  xtype:"container"
                ,html:"8.验证和目标控件值是否一致，通过配置target:'itemId'为目标控件"
            }
                 ,{
                 fieldLabel:"the second input"
                 ,itemId:"second"
                 ,xtype:"textfield"
                 ,labelAlign:"left"
                 ,msgTarget:"side"
                 ,target:"first"    //通过赋值target属性（其值为要匹配项的itemId）匹配对应的控件，进行相同值比较
                 ,vtype:"twiceInput"
                }
            ]

});
        });