`

[转]ExtJs 自定义Vtype验证

    博客分类:
  • web
 
阅读更多

转载自:http://blog.csdn.net/sz_bdqn/article/details/5418465

 

    最近公司开发项目在用ExtJs,碰到验证的就大概的总结了一些常用的验证。自定义的验证主要有两种方式:一种是单字段的自定义验证,另一种是多字段间的验证。对于单字段的验证主要通过regex配置项指定自定义正则表达式进行验证,而字段多的验证可以通过字定义VType类型进行验证支持。

Ext.apply(Ext.form.VTypes, 
{
  	daterange: function(val, field) 
  	{
    	var date = field.parseDate(val);
    
    	// We need to force the picker to update values to recaluate the disabled dates display
    	var dispUpd = function(picker) 
    	{
      		var ad = picker.activeDate;
      		picker.activeDate = null;
      		picker.update(ad);
    	};
    
    	if (field.startDateField) 
    	{
      		var sd = Ext.getCmp(field.startDateField);
      		sd.maxValue = date;
      		if (sd.menu && sd.menu.picker) 
      		{
        		sd.menu.picker.maxDate = date;
        		dispUpd(sd.menu.picker);
      		}
    	} 
    	else if (field.endDateField) 
    	{
      		var ed = Ext.getCmp(field.endDateField);
      		ed.minValue = date;
      		if (ed.menu && ed.menu.picker) 
      		{
        		ed.menu.picker.minDate = date;
        		dispUpd(ed.menu.picker);
      		}
    	}
    	return true;
  	},
  
  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:'请输入英文字母'
});

 

分享到:
评论

相关推荐

    Extjs验证表单 Extjs验证表单

    本文将深入探讨Extjs中的表单验证机制,包括错误信息提示方式、内置验证属性、Vtype验证以及自定义验证方法。 #### 二、Extjs 错误信息提示方式 在进行任何形式的验证之前,首先需要配置错误信息的提示方式。Extjs...

    extjs表单验证特殊字符

    每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的验证,我们通常会关心如何限制或排除某些特定字符。 1. **基本验证类型(vtype)**...

    Extjs表单常见验证小结

    总结来说,ExtJS表单验证提供了丰富的选项,从基础的空验证和简单的vtype验证,到自定义函数验证和正则表达式验证,几乎可以覆盖所有常见的验证需求。通过这些验证方式,开发者可以确保用户输入的数据既安全又符合...

    Extjs页面验证

    首先,ExtJS提供了多种内置的验证方法和组件属性,例如`vtype`和`fieldValidator`,用于在用户提交表单前验证字段内容。`vtype`是预定义的验证类型,如邮箱、数字等,可以简单快速地设置字段的验证规则。例如,对于...

    JS表单验证数字字母汉字邮箱.pdf

    ExtJS的VType验证提供了一种简化的方式,为特定类型的输入提供预定义的验证。例如,`vtype: 'email'`会自动检查输入值是否符合电子邮件的格式。如果不符合,它会显示预设的错误提示信息。 在给定的示例中,每个...

    EXT 表单验证EXT 表单验证

    通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义vtype示例 - 芒果奶茶的日志 - 网易博客.mht"和"Ext表单验证 - 天行健的日志 - 网易博客.mht"这样的资源,你可以深入理解EXT表单...

    Jquery、YUI、ExtJs 三大javascript框架表单验证带提示功能的demo

    它的表单验证功能强大且全面,提供了内置的表单字段验证器,如`vtype`属性可以设置预定义的验证类型,如`email`、`url`等。另外,还可以通过`field.validator`定义自定义验证函数。ExtJS的错误提示系统允许开发者...

    extjs总结.pdf

    - 示例:创建一个验证导演姓名的 `vtype`,要求由两个以大写字母开头的单词组成,单词间用空格分隔。 - 定义 `nameVal`, `nameMask` 和 `nameText`,然后将其与测试函数关联。 ```javascript Ext.form.VTypes['name...

    Extjs 提示和正则表达式

    在ExtJS中,正则表达式主要用于创建自定义验证规则,确保用户输入的数据符合预期格式。例如,在创建表单时,我们可以为字段指定`vtype`属性,这个属性可以接受一个正则表达式来实现验证: ```javascript { xtype: ...

    ExtJSWeb应用程序开发指南(第2版)

    4.2.3 自定义VType验证 4.3 表单的提交和加载 4.3.1 Ext.form.action.Action基础 4.3.2 Ajax模式的表单数据加载 4.3.3 Ajax模式的表单数据提交 4.3.4 标准模式的表单数据提交 4.3.5 使用Direct技术 4.4 本章...

    extjs属性方法大全

    - `vtype`: 验证类型,如 `alpha`(字母)、`alphanum`(字母数字)、`email`、`url` 等。 - `vtypeText`: 验证失败时的错误提示。 - `validator`: 自定义验证器函数。 - **事件:** - `selectOnFocus`: 获取...

    ext form小例子

    - 自定义验证:除了内置的验证类型,还可以通过`vtype`属性自定义验证函数,实现更复杂的数据验证逻辑。 3. `Ext.form.Vtype`扩展: - Vtype(Validation Type)是EXTJS中用于表单字段验证的一种机制,它是一组预...

    extjs实践大量实例讲解

    4. **主题定制**:ExtJS 具有强大的主题定制能力,允许开发者自定义界面样式,满足个性化需求。 #### 示例详解 下面我们将通过一系列具体示例来逐步学习 ExtJS 的使用方法: ### 示例 1:创建一个简单的窗口 ```...

    JS表单验证数字字母汉字邮箱.docx

    本篇文章将围绕"JS表单验证数字字母汉字邮箱"这一主题,详细介绍如何使用JavaScript进行表单验证,包括正则表达式(Regex)验证和VType验证。 首先,我们来看如何使用正则表达式进行验证。正则表达式是一种强大的文本...

    初试extJs,控件

    表单中的 `xtype:'textfield'` 表示创建的是一个文本输入框,`vtype:'specialChar'` 可能是一个自定义验证类型,用于限制输入字符的特殊规则。`anchor:'80%'` 设置了控件在容器中的宽度占80%。此外,表单还包括了三...

    Extjs属性大全

    - **vtype**:自定义验证类型,例如: - `alpha`:只允许字母。 - `alphanum`:只允许字母和数字。 - `email`:电子邮件地址格式。 - `url`:URL地址格式。 - **vtypeText**:验证失败时显示的消息。 - **...

    extJs 文本框后面加上说明文字+下拉列表选中值后触发事件

    文本框`updateDay`使用了`vtype: 'day'`,这是一种自定义验证类型,可能是一个自定义的验证函数,用于检查输入是否为有效的天数。同时,它还有`maxLength`属性限制输入的最大长度。 文本框后面跟的标签(`xtype: '...

    extjs 时间范围选择自动判断的实现代码

    在EXTJS中,我们可以自定义验证函数来实现这一功能。这里的关键是`daterange`函数,它会检查当前日期(`val`)是否符合日期范围的条件。如果`val`不是一个有效的日期,函数返回`false`;否则,根据`startDateField`...

    验证的正则表达式,开发提供参考

    - **vtype**: 字符串,自定义验证类型。 - **vtypeText**: 字符串,自定义验证类型失败时显示的提示信息。 - **validator**: 函数,自定义验证逻辑,默认为`null`。 以上配置项可以根据实际应用场景进行灵活调整,...

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    - `regex`: 正则表达式,自定义验证规则。 - `emptyText`: 输入框默认显示的提示文本,当输入框为空时显示。 3. **事件处理**: TextField支持多种事件,如`focus`, `blur`, `change`, `specialkey`等。例如,...

Global site tag (gtag.js) - Google Analytics