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

本文将介绍如何使用DevExtreme控件实现异步验证功能，欢迎下载相关组件体验！

现在可以使用异步验证规则在服务器上执行字段验证逻辑，实现函数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 JSONreturn res.json();}).then(serverResult => {// Server decided whether data is validif (serverResult.dataIsValid)resolve();elsereject(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平台编写的客户端兼容。

显式验证

如果在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 failedif (res.status === 'invalid') {// res.brokenRules contains an array of rules// that failed validation}});

限制

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

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

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

来源：慧都