NSS_08 extjs表单验证

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: '开始日期不能大于结果日期'

View Code

然后在要验证的俩日控件中加入属性：

dateRange: { begin: 'beginDate', end: 'endDate'},
vtype: 'dateRange'