extjs表单FormPanel验证

extjs表单FormPanel验证

EXT正则表达式prototype浏览器

在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属性

例如：

Js代码  收藏代码
  1. {  
  2.     xtype : 'textfield',  
  3.     fieldLabel : '编号' ,  
  4.     name : 'id' ,  
  5.     allowBlank : false ,  
  6.     msgTarget : 'qtip'  
  7. }  

 

上面说了下和表单验证相关的一些设置，我们现在来看一下和表单验证相关的属性及他们验证的顺序

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方式，希望启动抛砖引玉作用

Js代码  收藏代码
  1. //扩展VTypes增加id验证方式,和年龄验证  
  2. Ext.apply(Ext.form.VTypes,{  
  3.         'age' : function(_v){  
  4.             if(/^\d+$/.test(_v)){//判断必须是数字    
  5.                 var _age = parseInt(_v);  
  6.                 //增加业务逻辑,小于100的数字才符合年龄  
  7.                 if(0 < _age && _age <100){  
  8.                     return true ;  
  9.                 }  
  10.             }  
  11.             return false ;  
  12.         },  
  13.         ageText : '年龄必须为数字，并且不能超过100岁，格式为23' , //出错信息后的默认提示信息      
  14.     ageMask:/[0-9]/i  //键盘输入时的校验  
  15. })  
  16.   
  17.   
  18. Ext.onReady(function(){  
  19.     Ext.QuickTips.init();  //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。  
  20.     Ext.form.Field.prototype.msgTarget='side';           
  21.     var form = new Ext.form.FormPanel({  
  22.             frame : true ,  
  23.             defaultType : 'textfield' ,  
  24.             buttonAlign : 'center' ,  
  25.             labelAlign : 'right' ,  
  26.             labelWidth : 70 ,  
  27.             items : [  
  28.                 {  
  29.                     xtype : 'textfield',  
  30.                     fieldLabel : '编号' ,  
  31.                     name : 'id' ,  
  32.                     allowBlank : false ,  
  33.                     msgTarget : 'qtip'  
  34.                 },  
  35.                 {  
  36.                     fieldLabel : '名称' ,  
  37.                     name : 'name' ,  
  38.                     regex : /[\u4e00-\u9fa5]/,     //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.    
  39.                     regexText:"只能输入中文!",       //正则表达式错误提示    
  40.                     allowBlank : false             //此验证依然有效.不许为空.    
  41.                 },{  
  42.                     fieldLabel : '年龄' ,  
  43.                     name : 'age',  
  44.                     allowBlank : false ,  
  45.                     /* 
  46.                     minLength : 1 , 
  47.                     minText: '最少输入1位数字', 
  48.                     maxLength : 3 , 
  49.                     minText: '最多输入3位数字', 
  50.                     */  
  51.                     vtype : 'age'//,  
  52.                     //vtypeText : '覆盖age默认的错误提示'   
  53.                 }  
  54.             ] ,  
  55.             buttons : [  
  56.                 {  
  57.                     text : '确定' ,  
  58.                     handler : function(){  
  59.                         form.getForm().isValid();  
  60.                     }  
  61.                       
  62.                 }   
  63.             ]  
  64.       
  65.     });  
  66.   
  67. });  

 

posted @ 2012-06-26 10:16  holyes  阅读(986)  评论(0)  编辑  收藏  举报