EXT学习笔记08 FormPanel提交和表单验证
FormPanel这个控件是专门用于表单提交的AJAX控件，这个控件的特殊的地方的是他有一部分是panel控件继承下来。主要是外观方面的属性。而关于表单的功能是从一个叫Ext.form.BasicForm的类获得的。
代码如下
Ext.onReady(function() {
Ext.QuickTips.init();
// 这句话让验证信息在控件旁边显示
Ext.form.Field.prototype.msgTarget = 'side';
new Ext.form.FormPanel({
title : "注册用户",
layout : "form",
id:"userform",
width : 400,
height : 300,
frame : true,
labelWidth : 60,
waitMsgTarget: true,
renderTo : Ext.getBody(),
items : [{
xtype : "textfield",
fieldLabel : "用户名",
allowBlank:false,
blankText:"用户名不可以为空!",
name : "username"
}, {
xtype : "textfield",
fieldLabel : "密码",
name : "password",
inputType : "password",
allowBlank:false,
blankText:"密码不可以为空!",
minLength:5,
minLengthText:"密码最少为5位"
},{
xtype : "textfield",
fieldLabel : "电子邮件",
allowBlank:false,
blankText:"电子邮件不可以为空!",
name : "email",
vtype:"email"
},{
xtype : "textfield",
fieldLabel : "电话号码",
allowBlank:false,
blankText:"电话号码不可以为空!",
name : "phone",
vtype:"phone"
},{
xtype : "textfield",
fieldLabel : "价格",
allowBlank:false,
blankText:"价格不可以为空!",
name : "money",
vtype:"money"
}],
buttons : [{
text : "确定",
handler : function() {
this.disable();
//这是按钮的单击事件它先是取得他的容器也就是panelfrom控件在通过getForm()方法获得表单也就是bascfrom组件，再通过他的submit方法提交 this.ownerCt.getForm().submit({url:"addUser.do",waitMsg:"请等待",success:function(_form,_action){
var _userform = Ext.getCmp("userform");
_userform.buttons[0].enable();
Ext.MessageBox.alert("系统消息","添加成功!");
}});
this.enable();
}
}, {
text : "取消",
handler : function() {
this.ownerCt.getForm().reset();
}
}]
});
});
这里注意
Ext.onReady(function() {
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
new Ext.form.FormPanel({
title : "注册用户",
layout : "form",
id:"userform",
width : 400,
height : 300,
frame : true,
labelWidth : 60,
waitMsgTarget: true,
renderTo : Ext.getBody(),
items : [{
xtype : "textfield",
fieldLabel : "用户名",
allowBlank:false,
blankText:"用户名不可以为空!",
name : "username"
}, {
xtype : "textfield",
fieldLabel : "密码",
name : "password",
inputType : "password",
allowBlank:false,
blankText:"密码不可以为空!",
minLength:5,
minLengthText:"密码最少为5位"
},{
xtype : "textfield",
fieldLabel : "电子邮件",
allowBlank:false,
blankText:"电子邮件不可以为空!",
name : "email",
vtype:"email"
},{
xtype : "textfield",
fieldLabel : "电话号码",
allowBlank:false,
blankText:"电话号码不可以为空!",
name : "phone",
vtype:"phone"
},{
xtype : "textfield",
fieldLabel : "价格",
allowBlank:false,
blankText:"价格不可以为空!",
name : "money",
vtype:"money"
}],
buttons : [{
text : "确定",
handler : function() {
this.disable();
this.ownerCt.getForm().submit({url:"addUser.do",waitMsg:"请等待",success:function(_form,_action){
var _userform = Ext.getCmp("userform");
_userform.buttons[0].enable();
Ext.MessageBox.alert("系统消息","添加成功!");
}});
this.enable();
}
}, {
text : "取消",
handler : function() {
this.ownerCt.getForm().reset();
}
}]
});
});
url属性是提交的目标action
succer属性是后台成功的回调函数。一定注意后台不要有返回值否则会有问题。
第二：
验证部分
EXT为文本框控件自带了一些验证属性
比如
allowBlank：这个属性设置是否可以为空false为不可以为空。
blankText:如果这个文本框为空发出的错误信息。
minLength：文本框的最小长度
minLengthText:文本框的最小长度错误信息
最大长度错误可以看AIP和上面的差不多。
功能做强大的是Vtype属性
EXT为了解决像email验证这类复杂的表单验证提供了一些vtypes见Ext.form.VTypes类
只要在文本框的vtype属性中指定相应的vtypes就可以了但是EXT自带的有限我们可以自己扩展。
方法如下
Ext.apply(Ext.form.VTypes,
{
//首先定义一个vtype名称，和他的验证函数，val参数是文本框的值，field是文本框。一般我就使用val和正则表达式比较就OK了。
然后定义一个vtype的报错信息，与vtype名称加Text后缀。OK了。
password: function(val, field)
{
if (field.initialPassField)
{
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText: '两次输入的密码不一致！',
chinese:function(val,field)
{
var reg = /^[\u4e00-\u9fa5]+$/i;
if(!reg.test(val))
{
return false;
}
return true;
},
chineseText:'请输入中文',
age:function(val,field)
{
try
{
if(parseInt(val) >= 18 && parseInt(val) <= 100)
return true;
return false;
}
catch(err)
{
return false;
}
},
ageText:'年龄输入有误',
alphanum:function(val,field)
{
try
{
if(!/\W/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',
url:function(val,field)
{
try
{
if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
urlText:'请输入有效的URL地址.',
max:function(val,field)
{
try
{
if(parseFloat(val) <= parseFloat(field.max))
return true;
return false;
}
catch(e)
{
return false;
}
},
maxText:'超过最大值',
min:function(val,field)
{
try
{
if(parseFloat(val) >= parseFloat(field.min))
return true;
return false;
}
catch(e)
{
return false;
}
},
minText:'小于最小值',
datecn:function(val,field)
{
try
{
var regex = /^(\d{4})-(\d{2})-(\d{2})$/;
if(!regex.test(val)) return false;
var d = new Date(val.replace(regex, '$1/$2/$3'));
return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
}
catch(e)
{
return false;
}
},
datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',
integer:function(val,field)
{
try
{
if(/^[-+]?[\d]+$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
integerText:'请输入正确的整数',
minlength:function(val,field)
{
try
{
if(val.length >= parseInt(field.minlen))
return true;
return false
}
catch(e)
{
return false;
}
},
minlengthText:'长度过小',
maxlength:function(val,field)
{
try
{
if(val.length <= parseInt(field.maxlen))
return true;
return false;
}
catch(e)
{
return false;
}
},
maxlengthText:'长度过大',
ip:function(val,field)
{
try
{
if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
return true;
return false;
}
catch(e)
{
return false;
}
},
ipText:'请输入正确的IP地址',
phone:function(val,field)
{
try
{
if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
phoneText:'请输入正确的电话号码,如:0920-29392929',
mobilephone:function(val,field)
{
try
{
if(/(^0?[1][35][0-9]{9}$)/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
mobilephoneText:'请输入正确的手机号码',
alpha:function(val,field)
{
try
{
if( /^[a-zA-Z]+$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
alphaText:'请输入英文字母',
money:function(val,field)
{
try
{
if(/^\d+\.\d{2}$/.test(val))
return true;
return false;
}
catch(e)
{
return false;
}
},
moneyText:'请输入正确的金额'
});
网上找了一个验证脚本提供给大家。