`

ExtJS表单验证(同步验证+异步验证)

 
阅读更多

一、表单验证错误提示方式

Ext.QuickTips.init();   //为Ext组件提供提示信息功能
Ext.form.Field.prototype.msgTarget='side';  //指示错误出现的方式

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

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

二、Extj自带验证方式

    (1)基本方式

     allowBlank : Boolean //控件是否为空
     blankText : String//为空时提示信息

     minLength : Number  //最短长度
     minLengthText : String 
     maxLength : Number  
     maxLengthText : String//最长长度

    (2)正则表达式

     

{//联系人手机
				fieldLabel : '联系人手机电话',
				xtype : 'textfield',
				width:'250px',
				emptyText : '请输入联系人手机号码',
				name : 'cellphone',
				allowBlank : false,
				blankText : '手机号码不能为空',
				minLength : 11,
				minLengthText : '联系人手机长度不得小于11个字符长度',
				regex : /^1(3|5|8)[0-9]{9}$/,
				regexText:'请输入正确的电话格式'
			},

 (3)vtype方式

     例如:Ext.form.VTypes中提供了几个常用的验证方式,上述控件中添加属性vtype:'email'也可以自己写验证。

  (4)validator编写自定义函数验证validator : Function

    例如:

{//邮箱地址
				fieldLabel : '邮箱地址',
				xtype : 'textfield',
				emptyText : '请输入邮箱地址',
				name : 'email',
				id:'emailId',
				allowBlank : false,
				width:'250px',
				blankText : '邮箱地址不能为空',
				invalidText:'该邮箱已经被注册',
				validationEvent : 'blur',
				validator : function(){
						Ext.Ajax.request({
						    	url : 'checkRegEmail.do',
						    	params : {email:Ext.getCmp("emailId").getValue()},
						    	scope : true,
						    	method : 'POST',
						        callback : function(options,success,response){
						    	  if(success) {
						    		  var data = eval(response.responseText);
						    		  if(response.responseText=="true"){
						    		     returnValue(false);
						    		  } else if(response.responseText=="false"){
						    		     returnValue(true);
						    		  }
						    	  }
						       }
						});
						function returnValue(ok){
							IsExist = ok;
						}
						return IsExist;
		       }//end_validator

 

 上述第4中方式注意以下几点

(1)该验证使用的是同步请求,如果采用异步请求,Ext会不等待异步返回值,直接返回false,校验函数会一直返回false,

(2)returnValue函数的作用同样可保证验证函数在特定的时机内返回如validationEvent : 'blur',

(3)extjs3的同步请求方法见:http://lovezehui.iteye.com/admin/blogs/2065387

 

 

分享到:
评论

相关推荐

    Extjs4+MVC+struts2后台管理系统

    Struts2提供了拦截器、动作类、结果映射等机制,使得开发者可以方便地实现请求处理、表单验证和页面跳转。在这个系统中,Struts2作为服务器端的核心,接收前端ExtJS4发送的AJAX请求,进行数据处理并返回响应。 登录...

    ExtJs+ASP.net+MVC

    8. **验证与授权**:ASP.NET MVC 提供了内置的验证和身份认证机制,如DataAnnotations验证和FormsAuthentication,与ExtJS的表单验证相结合,可以确保数据的安全性和用户访问权限的控制。 9. **部署与性能优化**:...

    EXTJS4+MVC+JSP-buy360用户管理系统源码

    2. 数据绑定:EXTJS4的Model-View-Store机制允许实时的数据同步,提高了用户体验。 3. 组件化:EXTJS4提供了一套完整的组件体系,方便开发者快速搭建复杂UI。 4. 动态加载:通过Ajax和Store的异步加载功能,可以实现...

    spring+extjs项目文件

    3. 数据绑定:ExtJS的数据绑定机制,可以实现视图与数据模型的实时同步,提升用户体验。 4. 动态加载:通过Ajax技术,实现页面内容的异步更新,提高页面响应速度。 三、Spring与ExtJS整合 1. RESTful API:Spring ...

    ASP.NET+ExtJS开发实例

    这个“ASP.NET+ExtJS开发实例”可能涵盖了从基础概念到高级应用的多个层次,包括但不限于页面布局、数据绑定、异步操作、用户交互、性能调优等多个方面。通过学习这个实例,开发者可以掌握将这两种技术融合在一起的...

    EXTJS与.NET开发

    6. **EXTJS Form与.NET表单验证**:EXTJS的表单组件可以与.NET的服务器端验证机制结合,实现前后端的表单验证一致性,确保数据的准确性和安全性。 7. **EXTJS Ajax与.NET WebMethods**:EXTJS的Ajax组件可以调用...

    Extjs4--Form登录功能,结合struts2

    3. **表单验证**:可以使用Struts2的内置验证机制,通过注解或XML配置进行表单验证。 **四、表单提交与处理** 1. **异步提交**:使用ExtJS的`form.submit`方法,可以实现Ajax方式的表单提交,无需刷新整个页面。 2...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    6. **表单处理**:强大的表单组件和表单处理能力,支持各种输入类型,以及验证和提交功能。 7. **拖放功能**:内置的拖放API允许用户轻松创建可拖放的元素,增强了用户体验。 8. **国际化**:支持多语言,包括中文...

    ExtJs2.0学习系列

    ExtJS 2.0提供了强大的表单组件,如文本字段(TextField)、复选框(Checkbox)、下拉框(ComboBox)等,以及表单提交、验证等功能。理解和熟练运用表单组件,能够创建功能完善的用户输入界面,并实现数据的验证和...

    ASP.net + Extjs 网站通用后台框架

    3. **数据管理组件**:可能包含了ExtJS的GridPanel,用于展示和编辑表格数据,以及FormPanel,用于处理表单提交和验证。这些组件通过与ASP.NET的数据服务接口进行通信,实现了前后端的数据同步。 4. **权限控制**:...

    Extjs3.0 cookbook

    6. **表单(Forms)**:EXTJS的表单组件支持各种输入类型,并提供了表单验证和数据提交的功能。 7. **Ajax通信(Ajax Interactions)**:EXTJS内置的Ajax接口使得与服务器端的异步通信变得简单。 8. **拖放(Drag ...

    搭建好的EXTJS和SSH环境

    1. **EXTJS组件库**:EXTJS包含了大量的UI组件,如表格、表单、树形结构、面板、窗口等,可以快速构建出功能强大的Web应用界面。 2. **响应式布局**:EXTJS支持多种设备和屏幕尺寸,通过可配置的布局管理器,能够...

    extjs3.2资源压缩包

    9. **数据验证**:在表单组件中,ExtJS提供了强大的数据验证机制,确保用户输入的数据符合预定规则。 10. **拖放功能**:通过DragDrop API,开发者可以轻松实现元素的拖放操作,增加应用程序的交互性。 11. **图表...

    ExtJS_3.3中文

    6. **FormPanel**:用于创建表单,支持各种表单元素,如文本框、选择框、日期选择器等,以及表单验证和提交。 7. **Ajax请求**:Ext.Ajax模块提供了异步请求接口,方便与服务器进行数据交互。 8. **事件处理**:...

    ExtJS 3.4.0

    8. **表单组件**:ExtJS 3.4.0 包含各种表单字段(如文本框、下拉列表、日期选择器等),以及表单验证和提交功能,使得创建交互式表单变得容易。 9. **数据存储**:提供了本地存储(Local Storage)和远程存储...

    ExtJs 3.2.1

    7. **表单功能**:ExtJS 3.2.1 提供了强大的表单处理能力,包括各种输入控件、验证机制、表单提交和远程验证等功能,使得创建动态表单变得轻松。 8. **拖放功能**:通过DragDrop和DDGroup类,3.2.1 版本支持组件...

    ExtJs3.0和2.0中文API

    5. **强大的表单处理**:支持复杂表单的创建和验证,能够与服务器端数据进行交互。 6. **可扩展性**:允许自定义组件和插件,增强了框架的灵活性和可扩展性。 7. **主题支持**:可以通过更换CSS主题来改变应用的...

    Extjs 3.0 中文API

    7. **表单(Form)组件**:表单组件包含各种输入控件,如文本框(TextField)、选择框(ComboBox)、日期选择器(DateField)等,支持数据验证和提交。 8. **树形结构(Tree)**:提供了树形组件,可用于展示和操作...

    中文的Extjs的api手册

    5. **表单(Form)**:表单组件提供了丰富的输入控件,如文本框、下拉框、日期选择器等,并且支持数据验证和自动提交。 6. **树形视图(Tree)**:TreePanel组件可以用来展示层次结构的数据,支持拖放操作和动态...

    extjs2.1库文件

    6. **表单组件**:ExtJS的FormPanel提供了丰富的表单元素,如文本框、下拉框、复选框等,并支持验证、提交等功能,使得创建复杂的表单变得轻松。 7. **图表组件**:虽然ExtJS 2.1的图表功能相对较弱,但仍然提供了...

Global site tag (gtag.js) - Google Analytics