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

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。DevExtreme新旧版本帮助文档下载可进QQ qun获取169725316现在可以使用异步验证规则在服务器上执行字段验证逻辑实现函数validationCallback来返回一个Promise(或者jQuery的等效函数)。下面是一个示例:$(#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 { // Theres 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平台编写的客户端兼容。显式验证如果在Validator或ValidationGroup 上调用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 } });限制此时当您使用行、批处理或单元格编辑模式时数据网格和树列表小部件不支持异步规则。