ExtJs4 表格输入时的有效性验证

看到网上没有类似的demo 官方api又写的不太明确 , 就写了一个简单的例子分享一下 , 希望高手指点 帮忙改进~

一: 所需配置

1. Grid是单元格编辑模式 

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
	id : "fxxxCellEditing",
	clicksToEdit: 2//双击编辑
});

selType: 'cellmodel',

2. QuickTips用于悬浮显示错误信息

Ext.QuickTips.init();//错误悬浮提示

3. Grid的每一个columns声明一个editor

columns: [
    		        {
    	             	header: '<font color="red">*</font>功能',
    		        	dataIndex: 'funName',
    		            width: "10%",
    		            align: 'center',
    		            sortable: true,//是否可排序
    		            editor:new Ext.form.TextField({
		    		              allowBlank: false,
		    		       		  blankText   : "功能不能为空",       
		    		       		  maxLength: 40,
		    		       		  maxLengthText : "长度不能超过40"
		    		       		 
    		            })
    		        },

这个editor用Ext.form.TextField对象实现 , 

这样就可以在传参中写入验证的配置信息了.

二: 验证方式

1. 系统提供长度验证

这个长度是英文长度, 中文的话可以用后边的validator来数汉字的长度

		            editor:new Ext.form.TextField({
		    		              allowBlank: false,
		    		       		  blankText   : "功能不能为空",       
		    		       		  maxLength: 4,
		    		       		  maxLengthText : "长度不能超过4"
		    		       		  minLength:2,
		    		       		  minLengthText : "长度不能小于2",

2.正则表达式验证

    		            editor:new Ext.form.TextField({
    		            	allowBlank: false,  
							blankText : "故障模式频数比不能为空",
							regex :/^(0([\.]\d*[0-9]+)|0|1)$/, //==>此正则是[0,1] , 另"/0\.[0-9]*[1-9]$/"是(0,1)
   							regexText  : "只能输入:数值范围在0到1之间的小数"
    		            })

3.form.TextField的 validator :配置验证

    		            editor:new Ext.form.TextField({
		    		              allowBlank: false,
		    		       		  blankText   : "功能不能为空",       
		    		       		  validator : function( value ) 
		    		       		  {  
		    		       		  		var len = value.replace(/[^\x00-\xff]/g, "xx").length;  
								        if( len > 4000 )
								        {  
								             return '功能的长度不能超过4000字节，一个汉字字符为两个字节';  
								        }  
								        else
								        {
								       		 return true; 
								        } 
								  }
    		            })

4.vtype自定义验证

这个相对复杂 ,我只用validator 就能完成验证了 时间比较紧就没研究 嘿嘿

大致用法如下

vtype       : "email",//email格式验证  
        vtypeText   : "不是有效的邮箱地址",//错误提示信息

官方给了几个vtype

还可以通过

Ext.apply(Ext.form.field.VTypes, {

自己拓展 

官方api: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.VTypes

这还有一个高手写的vtype的总结:http://blog.csdn.net/nailwl/article/details/5707364

作者：ruantao1989
出处：http://blog.csdn.net/ruantao1989
申明：作者写博是为了总结经验，和交流学习之用。如需转载，请尽量保留此申明，并在文章页面明显位置给出原文连接。谢谢！