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'