Extjs 表单验证

在Extjs中，FormPane表单提供了各种各样的验证，

//在onReady的function（{}）添加以下两行代码，
Ext.QuickTips.init();   //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side';         //指示错误出现的方式，包含的值为

qtip-当鼠标移动到控件上面时显示提示  //默认值为qtip，使用此种方式必须声明Ext.QuickTips.init();   进行初始化
title-在浏览器的标题显示

under-在控件的底下显示错误提示
side-在控件右边显示一个错误图标，鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中

 

表单项的显示错误的方式也可以修改各项的msgTarget属性

例如：

{
	xtype : 'textfield',
	fieldLabel : '编号' ,
	name : 'id' ,
	allowBlank : false ,
	msgTarget : 'qtip'
}

 

再看一下和表单验证相关的属性及他们验证的顺序

1。和表单验证相关的熟悉及验证顺序（注意我们只说一些常用的，其他的情况属性请看相关的API）

1.1是否为空

allowBlank : Boolean
blankText : String

1.2输入数据长度限制

minLength : Number
minLengthText : String
maxLength : Number
maxLengthText : String

1.3使用vtype验证

vtype : String
vtypeText : String

1.4使用validator编写自定义函数验证

validator : Function

1.5使用自己编写的正则表达式regex

regex : RegExp
regexText : String

从上面可以看出Extjs提供了相当灵活的验证方式，并且提供了从简单到复杂的验证，可以根据项目的具体需要而进行选择使用那些验证方式

 

根据本人的爱好，更喜欢使用vtype验证，在Ext.form.VTypes中提供了几个常用的验证方式，在表单中只需要写下vtype:'email'，即可进行email信息的验证，而不需要写一大堆的正则表达式和相应的错误提示信息。如果Ext.form.VTypes默认的选项不能满足用户的需求，还可以进行扩展，当业务逻辑发生变化时只需要修改一处即可。

下面代码是扩展Ext.form.VTypes方式，希望启动抛砖引玉作用

 

//扩展VTypes增加id验证方式,和年龄验证
Ext.apply(Ext.form.VTypes,{
		'age' : function(_v){
			if(/^\d+$/.test(_v)){//判断必须是数字  
				var _age = parseInt(_v);
				//增加业务逻辑,小于100的数字才符合年龄
				if(0 < _age && _age <100){
					return true ;
				}
			}
			return false ;
		},
		ageText : '年龄必须为数字，并且不能超过100岁，格式为23' , //出错信息后的默认提示信息    
	ageMask:/[0-9]/i  //键盘输入时的校验
})


Ext.onReady(function(){
	Ext.QuickTips.init();  //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
	Ext.form.Field.prototype.msgTarget='side';         
	var form = new Ext.form.FormPanel({
			frame : true ,
			defaultType : 'textfield' ,
			buttonAlign : 'center' ,
			labelAlign : 'right' ,
			labelWidth : 70 ,
			items : [
				{
					xtype : 'textfield',
					fieldLabel : '编号' ,
					name : 'id' ,
					allowBlank : false ,
					msgTarget : 'qtip'
				},
				{
					fieldLabel : '名称' ,
					name : 'name' ,
					regex : /[\u4e00-\u9fa5]/,     //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.  
					regexText:"只能输入中文!",       //正则表达式错误提示  
					allowBlank : false             //此验证依然有效.不许为空.  
				},{
					fieldLabel : '年龄' ,
					name : 'age',
					allowBlank : false ,
					/*
					minLength : 1 ,
					minText: '最少输入1位数字',
					maxLength : 3 ,
					minText: '最多输入3位数字',
					*/
					vtype : 'age'//,
					//vtypeText : '覆盖age默认的错误提示' 
				}
			] ,
			buttons : [
				{
					text : '确定' ,
					handler : function(){
						form.getForm().isValid();
					}
					
				} 
			]
	
	});

});