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"
                }
            ]

            });
        });