DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExtreme v22.1正式版下載

現(xiàn)在可以使用異步驗(yàn)證規(guī)則在服務(wù)器上執(zhí)行字段驗(yàn)證邏輯，實(shí)現(xiàn)函數(shù)validationCallback來返回一個(gè)Promise(或者jQuery的等效函數(shù))。

下面是一個(gè)示例:

$('#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被解析，驗(yàn)證就成功，如果Promise被拒絕，驗(yàn)證就失敗。然而還有一個(gè)選擇，您可以用一個(gè)像這樣的對(duì)象來解析Promise：

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

DevExtreme目前支持這種場(chǎng)景，允許您直接返回服務(wù)器結(jié)果，不需要任何額外的邏輯。在這種情況下，即使Promise被解析，驗(yàn)證的成功或失敗取決于isValid屬性，失敗時(shí)將向用戶顯示可選消息。為了說明這個(gè)用例，下面是一個(gè)短的示例:

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

注意，如果不進(jìn)行任何處理，您可能會(huì)將技術(shù)錯(cuò)誤作為驗(yàn)證消息顯示給最終用戶，推薦考慮邊界情況的更詳細(xì)的算法，如第一個(gè)示例所示。

為了保持有效的驗(yàn)證，總是首先評(píng)估任何同步規(guī)則，只有在所有同步規(guī)則都通過時(shí)才評(píng)估異步規(guī)則。一旦異步驗(yàn)證開始，所有這些規(guī)則都將被并行檢查。

ASP.NET Core & ASP.NET MVC

我們?cè)黾恿藢?duì)ASP.NET [Remote]屬性在ASP.NET Core和ASP.NET MVC上啟用異步驗(yàn)證，您可以將此屬性應(yīng)用到模型的屬性中，傳遞控制器的名稱和要調(diào)用的方法進(jìn)行驗(yàn)證。

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

該屬性自動(dòng)為' async '驗(yàn)證規(guī)則生成客戶端代碼，回調(diào)服務(wù)器上運(yùn)行的控制器，控制器方法應(yīng)該檢查有效性：

[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中創(chuàng)建驗(yàn)證服務(wù)，這些服務(wù)與為其他受支持的DevExtreme平臺(tái)編寫的客戶端兼容。

顯式驗(yàn)證

如果在或 上調(diào)用validate()，并且有要檢查的異步規(guī)則，則需要使用 屬性提供的Promise接口來處理結(jié)果。

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
}
});

限制

此時(shí)當(dāng)您使用行、批處理或單元格編輯模式時(shí)，數(shù)據(jù)網(wǎng)格和樹列表小部件不支持異步規(guī)則。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論