ext自定义校验

最新推荐文章于 2020-06-03 15:44:00 发布

skeletons321

最新推荐文章于 2020-06-03 15:44:00 发布

阅读量724

点赞数

分类专栏：前端技术文章标签： date stylesheet user passwords function

本文链接：https://blog.youkuaiyun.com/liuzhiquan_1025/article/details/5978151

版权

前端技术专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在EXTJS中实现自定义的表单验证，包括日期范围验证（daterange）和密码验证。首先从EXTJS官网下载并引入所需资源文件，然后定义自定义验证方法，如daterange和password，最后在Ext.onReady中创建包含这些验证的表单组件并进行渲染。通过这种方式，可以确保表单数据的有效性和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 引进ext包

1) 首先从网站上下载extjs包。

2)在html中引入

3)在body中加入

4)执行脚本。

2 EXT表单

//表单验证

Ext.apply(Ext.form.VTypes, {

//daterange 为表单字段验证的方法名 val，field为参数 val表示表单输入框里的值，filed表示当前输入框对象

    daterange : function(val, field) {
        var date = field.parseDate(val);
  alert(val);

        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * 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;
    },

    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },

passwordText : 'Passwords do not match'
});

//ext开始加载

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({
      id:'FormPanel',
      labelWidth: 125,
      frame: true,
      title: 'Date Range',
      bodyStyle:'padding:5px 5px 0',
     width: 350,
      defaults: {width: 175},
      defaultType: 'datefield',// 表单字段默认日期格式
      items: [{
        fieldLabel: 'user',
        name: 'user',
        id: 'user',
        xtype: 'textfield', //表示类型为输入框
        readOnly : true //当readonly 为true时出入框不可编辑

      },{
        fieldLabel: 'userpwd',
        name: 'userpwd',
        id: 'userpwd',
        xtype: 'textfield',//表示类型为出入框
        inputType:'password'//表示此输入框为密码输入框
      },{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',//表单验证的调用的自定义函数为 daterange
        endDateField: 'enddt' // id of the end date field
      },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
      }]
    });

dr.render('dr');

//获取表单字段对象

//把表单ID值为"FormPanel"，name值为"user"的输入框为只读

//Ext.getCmp("FormPanel").form.findField('user').getEl().dom.readOnly = true;

把表单ID值为"FormPanel"，id值为"user"的输入框为只读

//Ext.getCmp("FormPanel").findById('user').getEl().dom.readOnly = true;

/*
     * ================ Password Verification ======================= var pwd = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Password Verification',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {
        width: 175,
        inputType: 'password'
      },
      defaultType: 'textfield',
      items: [{
        fieldLabel: 'Password',
        name: 'pass',
        id: 'pass'
      },{
        fieldLabel: 'Confirm Password',
        name: 'pass-cfrm',
        vtype: 'password',//密码确认验证，两次密码必须一致
        initialPassField: 'pass' // id of the initial password field
      }]
    });

pwd.render('pw');

     */


});