• 「详解」看界面控件DevExtreme如何实现异步验证


    DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

    DevExtreme v22.1正式版下载

    现在可以使用异步验证规则在服务器上执行字段验证逻辑,实现函数validationCallback来返回一个Promise(或者jQuery的等效函数)。

    B/S端界面控件DevExtreme——如何实现异步验证?

    下面是一个示例:

    $('#textBox').dxTextBox({ ... })
    .dxValidator({
    validationRules: [{
    type: 'async',
    message: 'Invalid value',
    validationCallback: ({value}) =>
    new Promise((resolve, reject) => {
    fetch('https://mydomain.com/validationService', {
    method: 'POST',
    body: JSON.stringify({ data: value })
    })
    .then(res => {
    if (!res.ok)
    throw new Error(`HTTP error: ${res.status} ${res.statusText}`);
    // Assuming the server returns JSON
    return res.json();
    })
    .then(serverResult => {
    // Server decided whether data is valid
    if (serverResult.dataIsValid)
    resolve();
    else
    reject(serverResult.errorMessage);
    })
    .catch(error => {
    // There's been a technical error.
    console.error('Server-side validation error', error);
    
    // Decide what to tell the user.
    reject('Cannot contact validation server');
    });
    });
    }
    }]
    });

    如果Promise被解析,验证就成功,如果Promise被拒绝,验证就失败。然而还有一个选择,您可以用一个像这样的对象来解析Promise:

    {
    isValid: false,
    message: 'Invalid value'
    }

    DevExtreme目前支持这种场景,允许您直接返回服务器结果,不需要任何额外的逻辑。在这种情况下,即使Promise被解析,验证的成功或失败取决于isValid属性,失败时将向用户显示可选消息。为了说明这个用例,下面是一个短的示例:

    validationCallback(params) {
    return $.getJSON('https://mydomain.com/validationService',
    { data: params.value });
    }

    注意,如果不进行任何处理,您可能会将技术错误作为验证消息显示给最终用户,推荐考虑边界情况的更详细的算法,如第一个示例所示。

    为了保持有效的验证,总是首先评估任何同步规则,只有在所有同步规则都通过时才评估异步规则。一旦异步验证开始,所有这些规则都将被并行检查。

    ASP.NET Core & ASP.NET MVC

    我们增加了对ASP.NET [Remote]属性在ASP.NET Core和ASP.NET MVC上启用异步验证,您可以将此属性应用到模型的属性中,传递控制器的名称和要调用的方法进行验证。

    [Remote("CheckEmailAddress", "Validation")]
    public string Email { get; set; }

    该属性自动为' async '验证规则生成客户端代码,回调服务器上运行的控制器,控制器方法应该检查有效性:

    [HttpPost]
    public IActionResult CheckEmailAddress(string email) {
    if (!_userRepository.VerifyEmail(email)) {
    return Json($"Email {email} is already registered.");
    }
    
    return Json(true);
    }

    这段代码使用Microsoft文档中为.NET Core Remote属性定义的返回值。

    或者,您也可以以上面描述的JSON格式返回有效性信息,包括isValid和message字段,这允许您在.NET Core中创建验证服务,这些服务与为其他受支持的DevExtreme平台编写的客户端兼容。

    显式验证

    如果在ValidatorValidationGroup 上调用validate(),并且有要检查的异步规则,则需要使用ValidationResult.complete 属性提供的Promise接口来处理结果。

    const result = validator.validate(); // OR validationGroup.validate();
    
    result.complete.then(res => {
    // res.status is 'valid' if all rules passed
    // res.status is 'invalid' if any rules failed
    if (res.status === 'invalid') {
    // res.brokenRules contains an array of rules
    // that failed validation
    }
    });
    限制

    此时当您使用行、批处理或单元格编辑模式时,数据网格和树列表小部件不支持异步规则。


    DevExpress技术交流群6:600715373      欢迎一起进群讨论

    更多DevExpress线上公开课、中文教程资讯请上中文网获取

     
  • 相关阅读:
    在 MAC 下配置 Nginx
    Color Schema 配色随笔
    .Net与 WebAssembly 随笔
    关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲
    用Nuget部署程序包
    Qt3D
    Qt3D Shader
    Qt QML 2D shader
    LearnOpenGL
    Qt3D 5.9 and future
  • 原文地址:https://www.cnblogs.com/AABBbaby/p/16805220.html
Copyright © 2020-2023  润新知