【ExtJS】FormPanel表单验证

时间:2024-12-08 14:37:20

在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 : '只能输入中文' 

   }]

});