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

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

 

一: 所需配置

1. Grid是单元格编辑模式

 

[javascript][/javascript] view plaincopy

  1. var cellEditing = Ext.create(‘Ext.grid.plugin.CellEditing’, {
  2.     id : “fxxxCellEditing”,
  3.     clicksToEdit: 2//双击编辑
  4. });

 

 

[javascript][/javascript] view plaincopy

  1. selType: ‘cellmodel’,

 

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

[javascript][/javascript] view plaincopy

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

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

 

[javascript][/javascript] view plaincopy

  1. columns: [
  2.                     {
  3.                         header: ‘<font color=”red”>*</font>功能’,
  4.                         dataIndex: ‘funName’,
  5.                         width: “10%”,
  6.                         align: ‘center’,
  7.                         sortable: true,//是否可排序
  8.                         editor:new Ext.form.TextField({
  9.                                   allowBlank: false,
  10.                                   blankText   : “功能不能为空”,
  11.                                   maxLength: 40,
  12.                                   maxLengthText : “长度不能超过40”
  13.                         })
  14.                     },

 

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

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

 

二: 验证方式

1. 系统提供长度验证

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

 

[javascript][/javascript] view plaincopy

  1. editor:new Ext.form.TextField({
  2.         allowBlank: false,
  3.           blankText   : “功能不能为空”,
  4.           maxLength: 4,
  5.           maxLengthText : “长度不能超过4”
  6.           minLength:2,
  7.           minLengthText : “长度不能小于2”,

 

 

2.正则表达式验证

 

[javascript][/javascript] view plaincopy

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

 

 

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

 

[javascript][/javascript] view plaincopy

  1.         editor:new Ext.form.TextField({
  2.             allowBlank: false,
  3.               blankText   : “功能不能为空”,
  4.               validator : function( value )
  5.               {
  6.                     var len = value.replace(/[^\x00-\xff]/g, “xx”).length;
  7.       if( len > 4000 )
  8.       {
  9.            return ‘功能的长度不能超过4000字节,一个汉字字符为两个字节’;
  10.       }
  11.       else
  12.       {
  13.              return true;
  14.       }
  15. }
  16.         })

 

 

4.vtype自定义验证

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

大致用法如下

 

[javascript][/javascript] view plaincopy

  1. vtype       : “email”,//email格式验证
  2.         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

标签