`

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

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics