EXT学习笔记08 FormPanel提交和表单验证

ExtJS表单与验证
最新推荐文章于 2025-11-21 17:32:11 发布
最新推荐文章于 2025-11-21 17:32:11 发布 · 194 阅读 · 0
文章标签：

#EXT #正则表达式 #prototype #Ajax #脚本

本文介绍如何使用ExtJS框架创建表单，并实现各种验证功能，包括必填项检查、长度限制及复杂验证等。

FormPanel这个控件是专门用于表单提交的AJAX控件，这个控件的特殊的地方的是他有一部分是panel控件继承下来。主要是外观方面的属性。而关于表单的功能是从一个叫Ext.form.BasicForm的类获得的。

代码如下

Ext.onReady(function() {
	Ext.QuickTips.init();
    // 这句话让验证信息在控件旁边显示
    Ext.form.Field.prototype.msgTarget = 'side';
	new Ext.form.FormPanel({
		title : "注册用户",
		layout : "form",
		id:"userform",
		width : 400,
		height : 300,
		frame : true,
		labelWidth : 60,
		waitMsgTarget: true,
		renderTo : Ext.getBody(),
		items : [{
					xtype : "textfield",
					fieldLabel : "用户名",
					allowBlank:false,
					blankText:"用户名不可以为空!",
					name : "username"
				}, {
					xtype : "textfield",
					fieldLabel : "密码",
					name : "password",
					inputType : "password",
					allowBlank:false,
					blankText:"密码不可以为空!",
					minLength:5,
					minLengthText:"密码最少为5位"

				},{
					xtype : "textfield",
					fieldLabel : "电子邮件",
					allowBlank:false,
					blankText:"电子邮件不可以为空!",
					name : "email",
					vtype:"email"
				},{
					xtype : "textfield",
					fieldLabel : "电话号码",
					allowBlank:false,
					blankText:"电话号码不可以为空!",
					name : "phone",
					vtype:"phone"
				},{
					xtype : "textfield",
					fieldLabel : "价格",
					allowBlank:false,
					blankText:"价格不可以为空!",
					name : "money",
					vtype:"money"
				}],
		buttons : [{
					text : "确定",
					handler : function() {
						this.disable();
//这是按钮的单击事件它先是取得他的容器也就是panelfrom控件在通过getForm()方法获得表单也就是bascfrom组件，再通过他的submit方法提交						this.ownerCt.getForm().submit({url:"addUser.do",waitMsg:"请等待",success:function(_form,_action){
							var _userform =  Ext.getCmp("userform");
							_userform.buttons[0].enable();
							Ext.MessageBox.alert("系统消息","添加成功!");
						}});
						this.enable();
					}
				}, {
					text : "取消",
					handler : function() {
						this.ownerCt.getForm().reset();
					}
				}]
	});
});

 这里注意

 Ext.onReady(function() {
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    new Ext.form.FormPanel({
        title : "注册用户",
        layout : "form",
        id:"userform",
        width : 400,
        height : 300,
        frame : true,
        labelWidth : 60,
        waitMsgTarget: true,
        renderTo : Ext.getBody(),
        items : [{
                    xtype : "textfield",
                    fieldLabel : "用户名",
                    allowBlank:false,
                    blankText:"用户名不可以为空!",
                    name : "username"
                }, {
                    xtype : "textfield",
                    fieldLabel : "密码",
                    name : "password",
                    inputType : "password",
                    allowBlank:false,
                    blankText:"密码不可以为空!",
                    minLength:5,
                    minLengthText:"密码最少为5位"

                },{
                    xtype : "textfield",
                    fieldLabel : "电子邮件",
                    allowBlank:false,
                    blankText:"电子邮件不可以为空!",
                    name : "email",
                    vtype:"email"
                },{
                    xtype : "textfield",
                    fieldLabel : "电话号码",
                    allowBlank:false,
                    blankText:"电话号码不可以为空!",
                    name : "phone",
                    vtype:"phone"
                },{
                    xtype : "textfield",
                    fieldLabel : "价格",
                    allowBlank:false,
                    blankText:"价格不可以为空!",
                    name : "money",
                    vtype:"money"
                }],
        buttons : [{
                    text : "确定",
                    handler : function() {
                        this.disable();
                        this.ownerCt.getForm().submit({url:"addUser.do",waitMsg:"请等待",success:function(_form,_action){
                            var _userform =  Ext.getCmp("userform");
                            _userform.buttons[0].enable();
                            Ext.MessageBox.alert("系统消息","添加成功!");
                        }});
                        this.enable();
                    }
                }, {
                    text : "取消",
                    handler : function() {
                        this.ownerCt.getForm().reset();
                    }
                }]
    });
});

url属性是提交的目标action

succer属性是后台成功的回调函数。一定注意后台不要有返回值否则会有问题。

第二：

验证部分

EXT为文本框控件自带了一些验证属性

比如

 

allowBlank：这个属性设置是否可以为空false为不可以为空。

blankText:如果这个文本框为空发出的错误信息。

minLength：文本框的最小长度

minLengthText:文本框的最小长度错误信息

最大长度错误可以看AIP和上面的差不多。

功能做强大的是Vtype属性

EXT为了解决像email验证这类复杂的表单验证提供了一些vtypes见Ext.form.VTypes类

只要在文本框的vtype属性中指定相应的vtypes就可以了但是EXT自带的有限我们可以自己扩展。

 

方法如下

 

Ext.apply(Ext.form.VTypes, 
{
  	
  //首先定义一个vtype名称，和他的验证函数，val参数是文本框的值，field是文本框。一般我就使用val和正则表达式比较就OK了。
 然后定义一个vtype的报错信息，与vtype名称加Text后缀。OK了。
  password: function(val, field) 
  {
	    if (field.initialPassField) 
	    {
	      	var pwd = Ext.getCmp(field.initialPassField);
	      	return (val == pwd.getValue());	
	    }
    	return true;
  },
  passwordText: '两次输入的密码不一致！',
  
  chinese:function(val,field)
  {
  		var reg = /^[\u4e00-\u9fa5]+$/i;
  		if(!reg.test(val))
  		{
  			return false;
  		}
  		return true;
  },
  chineseText:'请输入中文',
  
  age:function(val,field)
  {
	  	try
	  	{
	  		if(parseInt(val) >= 18 && parseInt(val) <= 100)
	  			return true;
	  		return false;
	  	}
	  	catch(err) 
	  	{
	  		return false;
	  	}
  },
  ageText:'年龄输入有误',
  
  alphanum:function(val,field)
  {
  		try
  		{
  			if(!/\W/.test(val))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',
  
  url:function(val,field)
  {
  		try
  		{
  			if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  urlText:'请输入有效的URL地址.',
  
  max:function(val,field)
  {
  		try
  		{
  			if(parseFloat(val) <= parseFloat(field.max))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  maxText:'超过最大值',
  
  min:function(val,field)
  {
  		try
  		{
  			if(parseFloat(val) >= parseFloat(field.min))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  minText:'小于最小值',
  	  
  datecn:function(val,field)
  {
  		try
  		{
  			var regex = /^(\d{4})-(\d{2})-(\d{2})$/;
			if(!regex.test(val)) return false;
			var d = new Date(val.replace(regex, '$1/$2/$3'));
			return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',
  
  integer:function(val,field)
  {
  		try
  		{
  			if(/^[-+]?[\d]+$/.test(val))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  integerText:'请输入正确的整数',
  
  minlength:function(val,field)
  {
  		try
  		{
  			if(val.length >= parseInt(field.minlen))
  				return true;
  			return false
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  minlengthText:'长度过小',
  
  maxlength:function(val,field)
  {
  	 try
  	 {
  	 	if(val.length <= parseInt(field.maxlen))
  	 		return true;
  	 	return false;
  	 }
  	 catch(e)
  	 {
  	 	return false;
  	 }
  },
  maxlengthText:'长度过大',
  
  ip:function(val,field)
  {
  		try
  		{
  			if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  ipText:'请输入正确的IP地址',
  
  phone:function(val,field)
  {
  		try
  		{
  			if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  phoneText:'请输入正确的电话号码,如:0920-29392929',
  
  mobilephone:function(val,field)
  {
  		try
  		{
  			if(/(^0?[1][35][0-9]{9}$)/.test(val))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  mobilephoneText:'请输入正确的手机号码',
  
  alpha:function(val,field)
  {
  		try
  		{
  			if( /^[a-zA-Z]+$/.test(val))
  				return true;
  			return false;
  		}
  		catch(e)
  		{
  			return false;
  		}
  },
  alphaText:'请输入英文字母',
  
  money:function(val,field)
  {
  		try
  		{
  			if(/^\d+\.\d{2}$/.test(val))  		
  				return true;
  		return false;	
  		}
  		catch(e)
  		{
  			return false;	
  		}

  },
  moneyText:'请输入正确的金额'
});

   网上找了一个验证脚本提供给大家。

 

 

 

 

 

 

 

 

 

Ext之FormPanel提交问题
xiuyouxu的专栏
09-27 962
近两天被一个奇怪的form提交问题困扰，百思不得其解。我在一个Window里放了一个FormPanel，表单里面的各字段对应一个pojo的属性，本来FormPanel没放在Window里时可以正常提交，但是在Window里提交后，后台用struts2对提交对象进行封装，发现封装后的对象为NULL，不能保存，一直没弄明白原因所在。 后来突然发现Window的close方法中有这样的解释：
关于ext form.FormPanel 的验证一些小技巧
liyanhui
07-23 240
在目前的项目里，第一次打开添加页面，没有出现验证的红框，如图1&lt;!--StartFragment --&gt; 但是以后在刚打开页面的时候，在没填任何数据之前都会显示验证的红框,如图2：&lt;!--StartFragment --&gt; &lt;!--StartFragment --&gt; 这个给用户非常不好的感受，我尝试了好多办法没有解决，后来在在同事的帮助下找到了解决方法， ...
Ext JS FormPanel 提交数据总结....
nodeblog的专栏
02-19 443
    今天研究FormPanel提交表单数据研究了半天.. 终于把表单提交成功了... 趁现在还记得问题，做一下总结:   1. 实用FormPanel如何提交表单:     在Ext中FormPanel并中并不保存表单数据，其中的数据是由BasicForm保存，在提交表单的时候需要获取当前FormPanel中的BasicForm来进行提交.                获取FormPane...
Ext.form.FormPanel 提交数据
xylike816的专栏
03-15 1652
formPanel.form.submit({                waitTitle : "请稍候",   <br />              waitMsg : "正在提交表单数据，请稍候.......",   <br />             url : updateurl,   <br />              method : "POST",   <br />              success : function(form, action) {   <br /> 
Ext.getCmp()简单应用
缭绕
03-02 3672
request.setAttribute("base",request.getContextPath()); %>       getCmp方法的简单应用         function ready(){   var setText = function(){//重新设置文本函数   var button = Ext.getCmp("btn"
ExtJs学习笔记之FormPanel组件
yinbenyang的专栏
02-08 354
FormPanel组件 　　FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域. 1、示例： 　　在window窗体中添加一个FormPan
ExtJS学习笔记3：载入、提交和验证表单
weixin_30501857的博客
06-05 103
载入数据 1.比較好用的设置form数据的方法： formPanel.getForm().setValues([{id: 'FirstName', value: 'Joe'}]); 当中id值为form中field的name属性值。value为要赋的值 2.通过对象赋值： Ext.define('Request', { extend: 'Ext.data.Model',...
Ext.Net学习笔记21：Ext.Net FormPanel 字段验证（validation）
weixin_34306676的博客
11-26 155
作为表单，字段验证当然是不能少的，今天我们来一起看看Ext.Net FormPanel的字段验证功能。 约束功能 为了防止用户输入不合法的数据，我们可以使用约束功能来限制用户的输入，例如TextField的MinLength/MaxLength，NumberField的MinValue/MaxValue，DateField的MinDate/Max...
Extjs学习笔记之二 初识Extjs之Form
12-10
Extjs中的表单组件是Ext.form.BasicForm，不过最简单最常用的是Ext.form.FormPanel控件，它继承自Panel，具有一定的界面显示控制能力，它其中包含着一个BasicForm对象，用来执行向服务器提交，加载等动作。...
ExtJS入门教程：FormPanel与表单控件解析
"这篇学习笔记主要探讨了Extjs中的表单组件，特别是Ext.form.FormPanel，它是基于Panel的控件，用于构建具有数据验证和服务器交互功能的表单。FormPanel内部包含了Ext.form.BasicForm对象，负责处理提交和加载数据的...
ext 学习笔记
02-21
当涉及到表单时，`Ext.getCmp("formId").getForm()`返回一个`Ext.form.FormPanel`实例，这允许开发者进一步操作表单，比如提交表单数据、验证字段等。 ### 数据绑定与组合框操作 在Ext JS中，组合框(`combo`)是一...
Gwt-ext学习笔记
12-25
### Gwt-ext学习笔记知识点详解 #### 一、GWT与Gwt-ext简介 - **GWT (Google Web Toolkit)**：是由Google开发的一款用于构建高度交互式的Web前端应用的开发框架，它允许开发者使用Java语言编写客户端代码，并通过...
Ext3.0控件实例：按钮、表单、窗口与面板使用笔记
表单在Web应用程序中用于收集和提交数据。Ext JS 提供了`Ext.FormPanel`控件，可以轻松创建包含各种表单元素（如文本框、复选框、下拉列表等）的表单，并支持复杂的布局。 验证是在客户端对用户输入的数据进行校验...
正则表达式超详细版
最新发布
MM_MS的博客
11-21 1669
正则表达式超详细版---->一篇文章让你认识正则表达式概念及其用法
Python高阶：“咬文嚼字” - 正则表达式
优快云高校俱乐部官方博客
11-21 727
Python高阶：“咬文嚼字” - 正则表达式
正则表达式与文本处理器以及命令小工具
m0_48877765的博客
11-19 688
上次和读者们分享了有关函数和数组的相关语句及基本运用，今天带大家了解一下有关正则表达式以及一些有用的命令小工具。今天主要相对详细的讲解了下有关正则表达式以及一些有用的命令小工具，希望对读者们有所帮助！
正则表达式与一些命令小工具
2503_93990865的博客
11-19 852
正则表达式（Regular Expression，简称 regex/RE）是一种，用于在字符串中查找、替换、提取符合规则的文本片段，广泛应用于编程（Python/Java/Shell）、文本处理（grep/sed/awk）、编辑器（Vim/VS Code）等场景。
Shell —— 正则表达式与文本处理器
2503_93991036的博客
11-19 1067
本笔记旨在为你系统性地揭开正则表达式的神秘面纱。我们将从核心概念出发，深入剖析每一个元字符与量词的用法，并通过大量贴近实战的示例，让你在理解理论的同时，快速掌握其在 Linux 命令行下的应用，特别是在 grep、sed、awk 等强大工具中的使用。无论你是系统管理员、开发者，还是任何需要与文本打交道的IT从业者，这都将是你工具箱中不可或缺的一项关键技能。
正则表达式 - 示例
froginwe11的博客
11-20 428
本文通过三个示例展示了正则表达式的应用，希望能帮助读者更好地理解和运用正则表达式。在实际应用中，正则表达式可以解决许多与字符串处理相关的问题，提高工作效率。
EXT与ASP.NET表单提交集成教程
表单提交通常通过`formpanel.getForm().submit()`方法来发起，提交过程中可以配置多种参数和回调函数，来定义提交行为以及如何处理提交后的响应。 3. **ASP.NET表单处理流程**： 当EXT JS完成客户端的表单数据收集...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值