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('//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      歡迎一起進群討論