Extjs做了非常好的表单验证功能, 使用起来非常方便。
系统内置了4种验证功能,分别是alpha, alphanumeric,url, email, 在程序中可以直接使用,(可以结合allowBlank属性和blankText来实现表单验证) 如下:
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Email Address',
name: 'email',
vtype: 'email' // applies email validation rules to this field
});
也可以实现自定义的验证功能, 其中**Text为验证失败的提示内容, **Mask为键盘过滤器
// custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.field.VTypes, {
IPAddress: function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
},
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i
});
一般的验证都可以使用上面方式,用正则验证自身内容即可,下面看一下与其它组件对比验证功能, 例如密码和确认密码, 起始日期和截止日期等。
dateRange: function(val, field) {
var beginDate = null,
beginDateCmp = null,
endDate = null,
endDateCmp = null,
validStatus = true;
if (field.dataRange)
{
if (!Ext.isEmpty(field.dateRange.begin)) {
beginDateCmp = field.up('form').down('#' + field.dateRange.begin);
beginDate = beginDateCmp.getValue();
if (!Ext.isEmpty(field.dateRange.end)) {
endDateCmp = field.up('form').down('#' + field.dateRange.end);
endDate = endDateCmp.getValue();
}
} if (Ext.isEmpty(beginDate) && Ext.isEmpty(endDate)) {
validStatus = beginDate <= endDate;
} return validStatus;
},
dateRangeTet: '开始日期不能大于结果日期'
然后在要验证的俩日控件中加入属性:
dateRange: { begin: 'beginDate', end: 'endDate'},
vtype: 'dateRange'