彩票走势图

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

翻译|行业资讯|编辑:龚雪|2022-10-18 11:09:51.997|阅读 68 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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('//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('//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平台编写的客户端兼容。

显式验证

如果在或 上调用validate(),并且有要检查的异步规则,则需要使用 属性提供的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新版全新发布

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP