【ExtJS】FormPanel表单验证

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

在表单验证前需要在onReady的function（{}）内添加以下代码:

Ext.QuickTips.init();   　　　　　　　　　　　　　　//为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。

出现错误提醒有两种方法:

1、Ext.form.Field.prototype.msgTarget='side';         //在onReady的function({})内添加

2、msgTarget : 'side'　　　　　　　　　　　　　　　　//在form的各子控件内添加

错误提示参数为:

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

under-在控件的底下显示错误提示

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

和表单验证相关的属性及验证顺序：

1.是否为空

allowBlank : Boolean 
blankText : String

2.输入数据长度限制

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

3.使用vtype验证

vtype : String 
vtypeText : String

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

validator : Function

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

regex : RegExp 
regexText : String

ps:可以进行多项验证，如非空验证与中文验证，同时有效。

代码：

Ext.onReady(function(){

　　Ext.QuickTips.init();

　　Ext.form.Field.prototype.msgTarget='side'; 　　

　　var formPanel = Ext.create('Ext.form.Panel', {

　　 title: 'Form',

　　  width: 400,

　　 layout: 'anchor',

　　 items: [{

　　　　 xtype : 'textfield',

　　　　 fieldLabel: 'Name',

　　　　　　name: 'name',

　　　　　　anchor : '100%',

　　　　　　allowBlank : false,

　　　　　　blankText : '不得为空',

　　　　　　regex : /[\u4e00-\u9fa5]/,      //自定义验证

　　　　　　regexText : '只能输入中文' 

　　 }]

});