ExtJs4_AdvancedValidation示例;

最新推荐文章于 2017-12-01 16:24:01 发布

cenyebao

最新推荐文章于 2017-12-01 16:24:01 发布

阅读量875

点赞数

分类专栏： 23JS_ExtJs 文章标签： extjs date passwords function html less

本文链接：https://blog.csdn.net/cenyebao/article/details/7302394

版权

23JS_ExtJs 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

/**
* ExtJs4
* =》AdvancedValidation示例
* 亮点：使用VTypes类进行客户端高级验证；
*/
Ext.require([
   "Ext.form.*"
]);

Ext.onReady(function() {
   // 扩展VTypes验证类型：
   Ext.apply(Ext.form.field.VTypes, {
       // 日期范围限制：
       daterange: function(val, field) {
           var date = field.parseDate(val);   // 转换成Date()对象：Date {Tue Feb 28 2012 00:00:00 GMT+0800};

           if(!date) {
               return false;
           }

           if(field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
               // 存在startDateField与(不存在dateRangeMax或者设置的最大值不等于dateRangeMax)：
               var start = field.up("form").down('#' + field.startDateField);
               start.setMaxValue(date);
               start.validate();   // 验证有效性；
               this.dateRangeMax = date;
           } else if(field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
               // 存在endDateField与(不存在dateRangeMin或者最小值不等于dateRangeMin)：
               var end = field.up("form").down('#' + field.endDateField);
               end.setMinValue(date);
               end.validate();
               this.dateRangeMin = date;
           }

           //由于我们只要此vtype设置最大值/最小值，所以总是返回true；
           return true;
       },
       daterangeText: "Start date must be less than end date!",

       // 密码验证：
       password: function(val, field) {
           if(field.initialPassField) {
               var pwd = field.up('form').down('#'+field.initialPassField);
               return (val == pwd.getValue());
           }
           return true;
       },
       passwordText: "Passwords do not match!"
   });

   var bd = Ext.getBody();
   // 日期范围示例_Date Range
   bd.createChild({tag: 'h2', html: '日期范围限制示例'});
   var drform = Ext.create('Ext.form.Panel', {
       renderTo: bd,
       title: "DateRange_日期范围限制",

       frame: true,
       width: 350,
       bodyPadding: "5px 5px 0",
       fieldDefaults: {
           labelWidth: 75,
           labelAlign: "right",
           msgTarget: "side",
           autoFitErrors: false
       },
       defaults: {
           width: 245,
           format: "Y-m-d"
       },
       defaultType: "datefield",
       items: [{
           fieldLabel: "StartDate",
           name:"startdt",
           id: "startdt",
           vtype: "daterange",
           endDateField: "enddt"   // id of the end date field;
       }, {
           fieldLabel: "EndDate",
           name: "enddt",
           id: "enddt",
           vtype: "daterange",
           startDateField: "startdt"   // id of the start date field;
       }]
   });

   // 密码验证示例_Password Verification
   bd.createChild({tag: 'h2', html: "密码匹配验证示例"});
   var pwdform = Ext.create('Ext.form.Panel', {
       renderTo: bd,

       frame: true,
       title: "Paseword Verification(验证)",
       width: 350,
       bodyPadding: "5px 5px 0",
       fieldDefaults: {
           labelWidth: 75,
           labelAlign: "right",
           msgTarget: "side",
           autoFitErrors: false
       },
       defaultType: "textfield",
       defaults: {
           width: 245,
           inputType: "password"
       },
       items: [{
           fieldLabel: "密码",
           name: 'pwd',
           id: "pwd"
       }, {
           fieldLabel: "确认",
           name: "pwd-cfm",
           vtype: "password",
           initialPassField: "pwd"    //要确认的密码field_ID；
       }]
   });

});