`

extjs6.5异步远程验证

 
阅读更多
extjs 6.5本身不支持异步验证,只能执行js验证,异步验证需要自己实现
在一个Ext.data.validator里面执行Ajax请求,请求执行成功后执行回调函数,然后调用Ext.field.Field的setError方法显示错误并阻止表单提交。
关于setError和isValid可以参考源码

    /**
     * This method is called by {@link #method!validate validate} if the value is both
     * non-empty (not `null`, `undefined` or `''`) and if the value can be parsed by the
     * {@link #method!parseValue parseValue} method. This parsing concern is technically
     * only in play for `Ext.field.Text` and derived classes (such as `Ext.field.Date` and
     * `Ext.field.Number`) but the guarantee here is that the `value` will be a parsed
     * value and not the raw string and if the value cannot be parsed, this method will
     * not be called.
     *
     * @param {Mixed} value The (parsed) value
     * @param {String[]} errors The array of validation errors
     * @param {Boolean} [skipLazy] `false` (the default) to run all validators.
     * @private
     */
    doValidate: function (value, errors, skipLazy) {
        var validators = this.getValidators(),
            len = validators && validators.length,
            i, result, validator;

        for (i = 0; i
            validator = validators[i];

            if (!skipLazy || !validator.lazy) {
                result = validator.validate(value);

                if (result !== true) {
                    //
                    if (!result || typeof result !== 'string') {
                        Ext.raise('Validator did not return a valid result.');
                    }
                    //

                    errors.push(result);
                }
            }
        }
    },

    parseValue: Ext.identityFn, // documented on textfield

    /**
     * Validate the field and return it's validity state.
     * To get the existing validity state without re-validating current value,
     * use {@link isValid}.
     *
     * @param {Boolean} [skipLazy] (private) Pass `true` to skip validators marked as `lazy`.
     * @return {Boolean} The new validity state.
     */
    validate: function (skipLazy) {
        var me = this,
            empty, errors, field, record, validity, value;

        // If we are in configuration and not validating any values, skip out of here
        if (me.isConfiguring && me.validateOnInit === 'none') {
            return true;
        }

        // if field is disabled and cfg not set to validate if disabled, skip out of here
        if (!me.getDisabled() || me.getValidateDisabled()) {
            errors = [];

            // If we are a textual input field, get the input element's value.
            // Check the DOM validity state first in case a type="number"
            // check has failed.
            if (me.isInputField && !me.isSelectField) {
                value = me.getInputValue();
                empty = !value;
                validity = empty && me.inputElement.dom.validity;

                if (validity && validity.badInput) {
                    errors.push(me.badFormatMessage);
                    empty = false;
                }
            }
            else {
                value = me.getValue();
                empty = value === '' || value == null;
            }

            if (empty && me.getRequired()) {
                errors.push(me.getRequiredMessage());
            }
            else if (!errors.length) {
                if (!empty) {
                    // Pass non-empty values along to parseValue to handle things like
                    // datefield and numberfield. Technically this concern is more of a
                    // textfield family issue, but it is awkward to leap out of this
                    // sequence in such a way as to make a surgical override practical...
                    // So we simply provide identityFn as the default parseValue impl
                    value = me.parseValue(value, errors);
                }

                if (!errors.length) {
                    field = me._validationField;
                    record = me._validationRecord;

                    if (field && record) {
                        field.validate(value, null, errors, record);
                    }

                    if (!empty) {
                        me.doValidate(value, errors, skipLazy);
                    }
                }
            }

            if (errors.length) {
                me.setError(errors);
                return false;
            }
        }

        me.setError(null);
        return true;
    },

当有错误显示时调用isValid就会为true,isValid的逻辑如下

    /**
     * Mark field as invalid.
     * @deprecated 6.5.0 Use {@link #setError} instead. (for classic compatibility)
     * @since 6.5.0
     */
    markInvalid: function (messages) {
        this.setError(messages);
    },

    /**
     * Mark field as valid.
     * @deprecated 6.5.0 Use {@link #setError setError(null)} instead. (for classic compatibility)
     * @since 6.5.0
     */
    clearInvalid: function () {
        this.setError(null);
    },

    /**
     * Returns true if field is valid.
     */
    isValid: function () {
        return !this.getError();
    },

为了使ajax回调时能获得field的引用需要修改doValidate的代码,把field的引用传递过去
result = validator.validate(value,this);

[code="js"]/**
* Created by hetao on 2017/10/12.
*/
Ext.define('overrides.field.Field', {
    override:'Ext.field.Field',
    /**
     * This method is called by {@link #method!validate validate} if the value is both
     * non-empty (not `null`, `undefined` or `''`) and if the value can be parsed by the
     * {@link #method!parseValue parseValue} method. This parsing concern is technically
     * only in play for `Ext.field.Text` and derived classes (such as `Ext.field.Date` and
     * `Ext.field.Number`) but the guarantee here is that the `value` will be a parsed
     * value and not the raw string and if the value cannot be parsed, this method will
     * not be called.
     *
     * @param {Mixed} value The (parsed) value
     * @param {String[]} errors The array of validation errors
     * @param {Boolean} [skipLazy] `false` (the default) to run all validators.
     * @private
     */
    doValidate: function (value, errors, skipLazy) {
        var validators = this.getValidators(),
            len = validators && validators.length,
            i, result, validator;

        console.log(this);
        for (i = 0; i
                    if (!result || typeof result !== 'string') {
                        Ext.raise('Validator did not return a valid result.');
                    }
                    //

                    errors.push(result);
                }
            }
        }
    },
});



然后自己定义验证器里面这样写
  validate: function(value,formField) {
Ext.Ajax.request({
url : 'rest/users?action=validate&username=' + newValue,
scope:formField,
success : function(response) {
// Ausuming responseText is {"valid" : true}
var validFlag = Ext.decode(response.responseText).valid ? true : 'The username is duplicated!';
if(validFlag!=true)
{
this.setError(validFlag);
}
}
return true;
}
return true;
}
分享到:
评论

相关推荐

    EXTJS 6.5 商用版

    EXTJS 6.5 商用版 移除试用水印 ,加入完整商用版 .JS 直接使用,

    ExtJs6.5官方文档

    ExtJs6.5官方文档

    extjs6.5快速开始.pdf

    ### Extjs6.5快速开始知识点详解 #### 一、Extjs6.5简介与Hello World应用 **介绍** - **快速入门指南目的**: 旨在帮助开发者快速掌握Ext JS的核心概念,成为有效的Ext JS开发人员。 - **学习方法**: 结合工作代码...

    ExtJs6.5Grid列表导出(包含样式)

    在ExtJs 6.5版本中,开发人员经常需要实现数据导出功能,特别是对于Grid组件,这是一项常见的需求。Grid列表通常用于展示大量结构化的数据,而导出功能可以帮助用户将这些数据保存到本地,方便进一步分析或共享。...

    extjs6.2加SenchaCmd-6.5.3.6-windows-64bit

    ExtJS 6.2与Sencha Cmd 6.5.3.6是Web应用程序开发中的两个关键工具,尤其在构建基于JavaScript的富客户端应用时。本文将深入探讨这两个组件及其在Windows 64位环境下的使用。 首先,ExtJS是一个强大的JavaScript...

    ExtJS6.5-Modern实例源码

    本工程涵盖了 Ext Js Modern 开发的各方面的基础知识, 比如开发环境搭建, 项目结构详解, 如何使用 api, 数据的增删查该基本示例, 以实际操作为主,非常好的入门项目 本书的各章节之间有一定的知识关联, 由浅至...

    ExtJs6.5 日历导航+日历月视图面板.rar

    "ExtJs6.5 日历导航+日历月视图面板.rar"是一个示例项目,展示了如何在Modern Toolkit下使用日历导航和月视图控件。 1. **日历导航**: 在ExtJS中,日历导航通常涉及到日期选择器和时间选择器组件,如`Ext.picker....

    ExtJS官方帮助文档6.5.0

    ExtJS是一种广泛使用的JavaScript框架,专门用于构建富客户端Web应用程序。6.5.0是其一个重要的版本,引入了许多新特性、改进和扩展,特别是针对“morden”组件的增强,使得它更适合现代Web开发的需求。 在ExtJS ...

    extjs tree 异步加载树型

    异步加载树型是 ExtJS Tree 的一个重要特性,允许只在需要时动态加载子节点,从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现,只有当用户展开一个节点时,才会向服务器请求该节点的子节点数据...

    extjs-653-docs.zip

    extjs-6.5.3离线API文档,是学习和开发的必要工具。希望有所帮助!

    EXTJS产品级别管理后台源代码

    同时,EXTJS的`Ext.Ajax`或`Ext.data.proxy.Ajax`模块用于与服务器进行异步通信,实现数据的CRUD操作。 3. **视图与控制器**:EXTJS的MVC(Model-View-Controller)架构使得代码组织清晰。产品级别的视图可能包含多...

    ExtJS-MVC-用户列表实例

    ExtJS是一个强大的JavaScript库,专用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括表格、树形视图、图表和其他多种UI元素。在本例"ExtJS-MVC-用户列表实例"中,我们将深入探讨如何利用ExtJS的Model-...

    extjs异步树,多选树,json数据机构,集成spring,struts例子

    extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json数据机构,集成spring,struts例子,extjs异步树,多选树,json...

    Extjs 6.2 主题 triton

    官方提供的主题并不是很多,这些是经过提取的主题,界面美观,又大气

    extjs 自定义验证

    extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证

    ExtJS3 实现异步下拉树

    在ExtJS 3中,实现异步下拉树涉及到几个关键概念和技术。 首先,理解“异步”意味着数据不是一次性加载完毕,而是按需加载。在下拉树中,当用户展开树节点时,只加载该节点及其子节点的数据,这减少了初始页面加载...

    EXtJs API 中文

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端应用程序。这个资源包包含了ExtJS API的中文版,方便中国开发者理解和使用。API文档是任何开发框架的核心部分,它提供了详细的类、方法、属性和事件的说明...

    EXTJS 源码

    作为Extjs 4架构更新的一部分,我们引用了一个功能更完整的类系统。 无论何时,Extjs都会提供一个优秀的类系统,这次我们进一步为它添加了动态加载、mixins和在线依赖计算等特性。

Global site tag (gtag.js) - Google Analytics