Ext.form.VTypes

来源：互联网发布：雅思阅读书知乎编辑：程序博客网时间：2024/06/05 04:12

Ext.form.VTypes

extjs的vtype默认支持的验证有：

1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）

2.alphanum//只能输入字母和数字，无法输入其他

3.email//email验证，要求的格式是"usc@sina.com"

4.url//url格式验证，要求的格式是http://www.sina.com

前面的验证都是extjs已经提供的，我们也可以自定义验证函数。

(1)//先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）

1. Ext.apply(Ext.form.VTypes, {

2. password : function(val, field) {// val指这里的文本框值，field指这个文本框组件，大家要明白这个意思

3. if (field.confirmTo) {// confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值

4. var pwd = Ext.get(field.confirmTo);// 取得confirmTo的那个id的值

5. return (val == pwd.getValue());

6. }

7. return true;

8. }

9. });

10. // 配置items参数

11. items : [{

12. fieldLabel : "密码",

13. id : "pass1"

14. }, {

15. fieldLabel : "确认密码",

16. id : "pass2",

17. vtype : "password",// 自定义的验证类型

18. vtypeText : "两次密码不一致！",

19. confirmTo : "pass1"// 要比较的另外一个的组件的id

20. }];

(2)起始日期和截止日期的动态校验

Ext.apply(Ext.form.VTypes, {

daterange : function(val, field) {

var date = field.parseDate(val);

if(!date){

return false;

}

if (field.startDateField) {

var start = Ext.getCmp(field.startDateField);

if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {

start.setMaxValue(date);

start.validate();

}

else if (field.endDateField) {

var end = Ext.getCmp(field.endDateField);

if (!end.minValue || (date.getTime() != end.minValue.getTime())) {

end.setMinValue(date);

end.validate();

}

* Always return true since we're only using this vtype to set the

* min/max allowed values (these are tested for after the vtype test)

return true;

});

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally

    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

/*

     * ================  Date Range  =======================

*/

    var dr = new Ext.FormPanel({

      labelWidth: 125,

      frame: true,

      title: 'Date Range',

      bodyStyle:'padding:5px 5px 0',

      width: 350,

      defaults: {width: 175},

      defaultType: 'datefield',

      items: [{

        fieldLabel: 'Start Date',

        name: 'startdt',

        id: 'startdt',

        format: 'Y-m-d',

        altFormats: 'Ymd|m-d|m/d/Y|m/d|d',

        vtype: 'daterange',

        endDateField: 'enddt' // id of the end date field

},{

        fieldLabel: 'End Date',

        name: 'enddt',

        id: 'enddt',

        format: 'Y-m-d',

        altFormats: 'Ymd|m-d|m/d/Y|m/d|d',

        vtype: 'daterange',

        startDateField: 'startdt' // id of the start date field

}]

});

    dr.render('dr');

});

0 0