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

});
});