ExtJS 表单验证
2013-06-29 20:51 阅读(170)


使用特定类型的表单组件 
使用regex正则表达式对输入内容进行验证 
使用VType对输入内容进行验证1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等) 
2.alphanum//只能输入字母和数字,无法输入其他 
3.email//email验证,要求的格式是"usc@sina.com" 
4.url//url格式验证,要求的格式是http://www.sina.com 
Eg: 

fieldLabel:'电子邮件', 
vtype:'email' 
},{ 
fieldLabel:'字母', 
vtype:'alpha' 
},{ 
fieldLabel:'字母数字', 
vtype:'alphanum' 

自定义VType验证:一是单字段的自定义验证,二是多字段间自定义验证 
Eg: 
//单字段格式验证:Vtype 自定义电话号码的VType验证 
Ext.apply(Ext.form.field.VTypes,{ 
phone:function(v){ 
  //规则区号:(3-4位数字)-电话号码(7-8位数字) 
  return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v); 
}, 
phoneText:'请输入有效的电话号码', 
phoneMask: /[\d-]/i   //只允许输入数字和- 
});{//自定义Vtype 
fieldLabel:'Phone', 
vtype:'phone'} 
多字段间自定义验证: 
//多字段验证扩展 
Ext.apply(Ext.form.field.VTypes, { 
dateRange : function(val, field) { 
var beginDate = null, beginDateCmp = null, //开始日期组件 
endDate = null, endDateCmp = null, validStatus = true;//验证状态 
if (field.dateRange) { 
//获取开始时间 
if (!Ext.isEmpty(field.dateRange.begin)) { 
beginDateCmp = Ext.getCmp(field.dateRange.begin); 
beginDate = beginDateCmp.getValue(); 

//获取结束时间 
if (!Ext.isEmpty(field.dateRange.end)) { 
endDateCmp = Ext.getCmp(field.dateRange.end); 
endDate = endDateCmp.getValue(); 


//如果开始日期或结束日期有一个为空,则校验通过 
if (!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)) { 
validStatus = beginDate <= endDate; 

return validStatus; 
}, 
dateRangeText : '开始日期不能大于结束日期' 
}); 
      { 
//多字段验证 
fieldLabel:'入学开学日期', 
id:'beginDate1', 
xtype:'datefield', 
labelSeparator:':', 
msgTarget:'side', 
autoFitErrors:false, 
format:'Y年m月d日', 
maxValue:'12/31/2088',//显示的最大日期 
minValue:'01/01/2008',//显示的最小日期 
width:220, 
dateRange:{begin:'beginDate1',end:'endDate1'},//用于Vtype类型 
vtype:'dateRange'
},{ 
//多字段验证 
fieldLabel:'毕业结束日期', 
id:'endDate1', 
xtype:'datefield', 
labelSeparator:':', 
msgTarget:'side', 
autoFitErrors:false, 
format:'Y年m月d日', 
maxValue:'12/31/2088',//显示的最大日期 
minValue:'01/01/2008',//显示的最小日期 
width:220, 
dateRange:{begin:'beginDate1',end:'endDate1'},//用于Vtype类型 
vtype:'dateRange'