Ext3 学习(3) -- 表单验证

最新推荐文章于 2016-04-18 08:57:45 发布

Acc2013

最新推荐文章于 2016-04-18 08:57:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext3 文章标签： Ext3 Validate

本文链接：https://blog.youkuaiyun.com/Acc2013/article/details/9257633

Ext3 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了ExtJS中表单验证的各种方法，包括非空验证、长度限制、正则验证、vtype验证及自定义验证函数等。此外还提供了关于提示信息位置设置的指导，并举例说明了如何自定义vtype进行IP地址验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A、表单验证，是要显示错误提示信息，所以加上

// necessary when to show tips
Ext.QuickTips.init();	
// set the location of tips, default: qtip
Ext.form.Field.prototype.msgTarget = "side";

B、关于提示信息的位置，文档的说明：

这篇文章：http://www.cnblogs.com/guafuli/articles/msgtarget_values.html 还有个图文显示。（side: 要是能同是显示图标和提示文字，该多好。。）

C、下面的是关于TextField的几种验证方式：

//1. 非空验证：
{
	fieldLabel: "Required",
	allowBlank: false,
	blankText: "Please Input Something!"				
}

//2. 长度限制：
{
	fieldLabel: "Length",
	minLength: 4,   // same as 'maxLength'
	minLengthText: "At least four chars needed!"
}

//3. 正则验证：
{
	fieldLabel: "Regex",
	regex: /^[a-zA-Z]{3}$/i,
	regexText: "Only allow three letters!"
}
//正则才是最强大的， 其他的那些都是可以用正则来替换的。

//4. vtype – 邮箱验证
{
	fieldLabel: "Email",
	vtype: "email",
	vtypeText: "Email address format is wrong"
}
//5. 自定义验证函数 – validator
{
	fieldLabel: "Custom",
	validator: function(txtValue){
		if((/[^\x00-\x99]/gi).test(txtValue))
			return false; 	// or can return the error msg
		return true;
	},
	invalidText: "Can not Input Chinese character!"
}

D、关于vtype的验证类型，默认的有：

alpha //只能输入字母
alphanum //只能输入字母和数字
email //email验证，要求的格式是 name@163.com
url //url格式验证，要求的格式是http://www.baidu.com

还可以自定义 vtype 验证，文档说明：

写一个 IP地址验证的示例：

// custom vtype: IP address
Ext.apply(Ext.form.VTypes,{
	// function for validation
	ip: function(ipValue){
		// just a simple 
		var ipRegex = /^(\d{1,3})(\.\d{1,3}){3}$/i;
		return ipRegex.test(ipValue);
	},
	// default error text
	ipText: "Not a valid IP, Correct Format is 12.23.2.1",
	// filter keys, can only type digit and dot
	ipMask: /[\d\.]/i
});

用法就和 ‘email’一个样。

关于正则，参考了http://www.cnblogs.com/aaronjs/archive/2012/06/30/2570970.html

http://blog.youkuaiyun.com/yukon12345/article/details/6827640

（感谢 [yukon12345]盆友，一直以来我都没搞懂这个‘\1’ 的反向分组用法，原来是，“代表前一个分组相同的匹配结果字符。如\d{1} 匹配了9，那么\1也只能为匹配9 ”）

E、文章参考：

http://blog.youkuaiyun.com/nailwl/article/details/5707364

http://blog.youkuaiyun.com/jerrysbest/article/details/6639434

http://www.cnblogs.com/over140/archive/2009/09/20/1570457.html(伯伯的这个，还有点难度，目前消化不动。。。)