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

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

DevExtreme v22.1正式版下载

现在可以使用异步验证规则在服务器上执行字段验证逻辑，实现函数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 => {
// 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 failed
if (res.status === 'invalid') {
// res.brokenRules contains an array of rules
// that failed validation
}
});

限制

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

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

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