ExtJs表单验证的方法总结
一、基本验证方式，使用vtype属性。
1.alpha只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum只能输入字母和数字，无法输入其他
3.email验证，要求的格式是[email protected]
4.url格式验证，要求的格式是http://www.baidu.com
二、其他方式验证。
1.验证最大最小输入字数。（Ext中maxLength和minLength不太管用！）
|
1
2
3
4
|
maxLength : 20,
//允许输入的最大字符数
maxLengthText :
"用户帐号最大长度不能超过20个字符！"
,
//提示文本
minLength : 3,
//允许输入的最少字符数
minLengthText :
"用户帐号最小长度不能少于3个字符！"
,
//提示文本
|
注意：中文字符不是两个字符，比如“你好”算2个字符。
2.正则表达式验证。
|
1
2
|
regex : /^(([0-9]+[a-zA-Z]+)|([a-zA-Z]+[0-9]+))$/,
regexText :
"对不起，用户帐号只能输入字母和数字！"
,
|
三、vtype实现高级验证。
因为Extjs的vtype只实现了四种基本的验证方式，所有需要自己去创建新的验证方式。
在表单初始化时后面加入代码
|
1
2
3
4
5
|
Ext.apply(Ext.form.VTypes, {
verifycustomer :
function
(value) {
//验证方法名
//验证方法
}
});
|
设置控件的vtype属性为自定义的验证方法名和提示文本vtypeText属性。
|
1
2
|
vtype :
"verifycustomer"
,
vtypeText :
"对不起，客户账号已经存在！"
,
|
例如：
|
1
2
3
4
5
6
7
8
9
10
|
Ext.apply(Ext.form.VTypes,
{
// 年度必须是4位的验证
numCheck :
function
(val, field){
if
(val.match(/\d/g).length != 4){
return
false
;
}
return
true
;
},
numCheckText :
'请输入4位数的年度！'
}
|
最后只要使用vtype : 'numCheck'即可。
实例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
Ext.onReady(
function
(){
Ext.QuickTips.init();
// 非空验证，通过allowBlank:false实现
var
name =
new
Ext.form.TextField(
{
name:
"name"
,
fieldLabel:
"用户名"
,
allowBlank:
false
,
blankText:
"用户名不能为空！"
,
width:300,
renderTo:document.body
}
);
// 长度验证
var
pwd =
new
Ext.form.TextField(
{
name:
"pwd"
,
fieldLabel:
"密码"
,
inputType:
"password"
,
minLength:6,
maxLength:16,
minLengthText:
"密码至少6位！"
,
maxLengthText:
"密码最多16位！"
,
width:300,
renderTo:document.body,
allowBlank:
false
,
blankText:
"密码不能为空！"
}
);
// vtype验证。可以验证包含以下：1.字母和下划线(alpha)。2.字母、数字、下划线(alphanum)。3.邮箱(email)。4.网址(url)
var
url =
new
Ext.form.TextField(
{
name:
"url"
,
fieldLabel:
"网址"
,
allowBlank:
false
,
blankText:
"网址为必输项！"
,
vtype:
"url"
,
vtypeText:
"您的网址输入有误！"
,
width:300,
renderTo:document.body
}
);
// 正则表达式验证
var
file =
new
Ext.form.TextField(
{
name:
"name"
,
fieldLabel:
"Name"
,
width:300,
allowBlank:
false
,
blankText:
"name字段不能为空！"
,
renderTo:document.body,
regex:/^w{8,}$/,
//至少6个字符
invalidText:
"请输入至少8这个字符！"
}
);
});
|