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

});
        });

上一篇:ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题


下一篇:Python图表绘制:matplotlib绘图库入门