首页 > 代码库 > 【ExtJS】FormPanel表单验证

【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 : ‘只能输入中文‘ 

      }]

});

 

【ExtJS】FormPanel表单验证