`
wang19841229
  • 浏览: 96657 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

    博客分类：
  • ajax
EXT正则表达式prototypeAjax脚本 
阅读更多

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学习笔记07AJAX提交JSON数据又一次的思 ...
评论
1 楼 iKing 2009-05-05  
不错，马上拿来用了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Gwt-ext学习笔记

    ### Gwt-ext学习笔记知识点详解 #### 一、GWT与Gwt-ext简介 - **GWT (Google Web Toolkit)**：是由Google开发的一款用于构建高度交互式的Web前端应用的开发框架，它允许开发者使用Java语言编写客户端代码，并通过...

    ext 学习笔记

    当涉及到表单时，`Ext.getCmp("formId").getForm()`返回一个`Ext.form.FormPanel`实例，这允许开发者进一步操作表单，比如提交表单数据、验证字段等。 ### 数据绑定与组合框操作 在Ext JS中，组合框(`combo`)是一...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    EXT_JS实用开发指南_个人整理笔记.rar

    例如，`Ext.window.Window`用于创建弹出窗口，`Ext.grid.Panel`用于展示数据网格，而`Ext.form.FormPanel`则用于创建表单。 在EXT_JS中，数据绑定是另一个关键特性。通过使用Store对象，开发者可以轻松地将数据与...

    Extjs学习笔记之二 初识Extjs之Form

    在本篇Extjs学习笔记中，我们将深入探讨Extjs中的Form，特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先，Extjs中的表单组件主要基于Ext.form.BasicForm，这是一个基础的表单对象，负责处理表单数据...

    ExtJS使用笔记

    ExtJS表单处理是通过Ext.form.FormPanel类实现的，它封装了HTML表单的所有功能，并提供了一些额外的配置属性，如监听表单提交、加载表单数据等。FormPanel可以包含表单域（Field），如文本框、复选框、下拉选择等，...

    ExtJs + api + 笔记 + 完整包

    "28-表单FormPanel控件的使用.doc"讲述了ExtJs中的表单组件，包括创建表单、添加字段、验证用户输入以及提交数据等操作。表单组件在数据收集和用户交互中扮演着重要角色。 最后，"ext-3.4.1"可能是一个包含ExtJs...

    grials22D:\keke\grails指南\笔记\1111111.txt,grails 初学者，使用说明的。

    var modifyForm = new Ext.form.FormPanel({ buttonAlign: 'center', bodyStyle: 'padding:5px', width: 550, border: false, method: 'POST', id: 'modifyForm', labelWidth: 85, labelAlign: 'left', ...

Magicbox
Global site tag (gtag.js) - Google Analytics