<span>$form['email'] = array(
</span>  <span>'#type' => 'email',
</span>  <span>'#title' => $this->t('Your .com email address.'),
</span>  <span>'#default_value' => $config->get('demo.email_address'),
</span>  <span>'#ajax' => [
</span>    <span>'callback' => array($this, 'validateEmailAjax'),
</span>    <span>'event' => 'change',
</span>    <span>'progress' => array(
</span>      <span>'type' => 'throbber',
</span>      <span>'message' => t('Verifying email...'),
</span>    <span>),
</span>  <span>],
</span>  <span>'#suffix' => '<span ></span>'
</span><span>);</span>

> #AJAX數(shù)組內(nèi)部的回調(diào)指向我們的表單類（ValidateMailajax（））中的方法，而事件將javaScript綁定到此表單元素的jQuery Change事件中。另外，您還可以指定一個路徑密鑰，而不是回調(diào)，但是在我們的情況下，這意味著還必須設置一個似乎冗餘的路由和控制器。而且我們不希望包裝器密鑰，因為我們不打算填充帶有返回內(nèi)容的區(qū)域，而是想詳細介紹回調(diào)所產(chǎn)生的操作。為此，我們將使用ajax命令。

要了解所有這些，我鼓勵您查閱AJAX API頁面或AJAX的表格API條目。您可以使用少數(shù)其他選項來進一步自定義表單元素的Ajax行為。

>現(xiàn)在是時候在我們的表單類中寫下回調(diào)方法了。這將接收$ form array和$ form_state對象，作為來自觸發(fā)ajax請求的表單的參數(shù)：>

簡單地說，在此方法中，我們執(zhí)行驗證並返回帶有多個命令的AJAX響應，這些命令取決於驗證結果。使用CSSCommand，我們將一些CSS直接應用於電子郵件表單元素，而使用HTMLCommand，我們替換了指定的選擇器的內(nèi)容（請記住我們的表單元素中的後綴嗎？）。

<span>/**
</span><span> * Ajax callback to validate the email field.
</span><span> */
</span><span>public function validateEmailAjax(array &$form, FormStateInterface $form_state) {
</span>  <span>$valid = $this->validateEmail($form, $form_state);
</span>  <span>$response = new AjaxResponse();
</span>  <span>if ($valid) {
</span>    <span>$css = ['border' => '1px solid green'];
</span>    <span>$message = $this->t('Email ok.');
</span>  <span>}
</span>  <span>else {
</span>    <span>$css = ['border' => '1px solid red'];
</span>    <span>$message = $this->t('Email not valid.');
</span>  <span>}
</span>  <span>$response->addCommand(new CssCommand('#edit-email', $css));
</span>  <span>$response->addCommand(new HtmlCommand('.email-valid-message', $message));
</span>  <span>return $response;
</span><span>}</span>

<span>/**
</span><span> * Validates that the email field is correct.
</span><span> */
</span><span>protected function validateEmail(array &$form, FormStateInterface $form_state) {
</span>  <span>if (substr($form_state->getValue('email'), -4) !== '.com') {
</span>    <span>return FALSE;
</span>  <span>}
</span>  <span>return TRUE;
</span><span>}</span>