長(zhǎng)期以來，開發(fā)者一直渴望對(duì)表單元素?fù)碛懈嗫刂茩?quán)。雖然這說法略顯夸張，但創(chuàng)建或自定義表單組件多年來一直是前端網(wǎng)頁開發(fā)的圣杯。

自定義元素（例如 <my-custom-element></my-custom-element>）最強(qiáng)大的功能之一，自 Google Chrome 77 版本起已悄然問世，并逐步應(yīng)用于其他瀏覽器。ElementInternals 標(biāo)準(zhǔn)是一套功能強(qiáng)大的功能集，其名稱卻十分低調(diào)。其功能包括參與表單以及圍繞輔助功能控件的 API。

本文將探討如何創(chuàng)建自定義表單控件，集成約束驗(yàn)證，介紹內(nèi)部輔助功能的基礎(chǔ)知識(shí)，并展示如何將這些功能結(jié)合起來創(chuàng)建高度可移植的宏表單控件。

讓我們從創(chuàng)建一個(gè)與我們的設(shè)計(jì)系統(tǒng)匹配的簡(jiǎn)單自定義元素開始。我們的元素將把所有樣式保存在 shadow DOM 中，并確保一些基本的輔助功能。我們將使用來自 Google Polymer 團(tuán)隊(duì)的出色 LitElement 庫作為我們的代碼示例，雖然您絕對(duì)不需要它，但它確實(shí)為編寫自定義元素提供了很好的抽象。

在這個(gè)示例中，我們創(chuàng)建了一個(gè) <rad-input></rad-input>，它具有一些基本設(shè)計(jì)。我們還在表單中添加了第二個(gè)輸入，這是一個(gè)普通的 HTML 輸入，并添加了默認(rèn)值（因此您可以直接按提交并查看其工作方式）。

當(dāng)我們單擊提交按鈕時(shí)，會(huì)發(fā)生幾件事。首先，調(diào)用提交事件的 preventDefault 方法，在本例中，是為了確保我們的頁面不會(huì)重新加載。之后，我們創(chuàng)建一個(gè) FormData 對(duì)象，它使我們可以訪問有關(guān)表單的信息，我們用它來構(gòu)造一個(gè) JSON 字符串并將其附加到 <output></output> 元素。但是，請(qǐng)注意，添加到我們的輸出中的唯一值來自名為“basic”的元素。

這是因?yàn)槲覀兊脑剡€不知道如何與表單交互，所以讓我們使用 ElementInternals 實(shí)例設(shè)置我們的 <rad-input></rad-input>，以幫助它名副其實(shí)。首先，我們需要在元素的構(gòu)造函數(shù)中調(diào)用我們的方法的 attachInternals 方法，我們還將把 ElementInternals polyfill 導(dǎo)入到我們的頁面中，以便與尚不支持該規(guī)范的瀏覽器一起使用。

attachInternals 方法返回一個(gè)新的元素內(nèi)部實(shí)例，其中包含一些我們可以在我們的方法中使用的新 API。為了讓我們的元素能夠利用這些 API，我們需要添加一個(gè)返回 true 的靜態(tài) formAssociated getter。

class RadInput extends LitElement {
  static get formAssociated() {
    return true;
  }

  constructor() {
    super();
    this.internals = this.attachInternals();
  }
}

讓我們來看看元素的 internals 屬性中的一些 API：

• setFormValue(value: string|FormData|File, state?: any): void — 此方法將在存在父表單的情況下設(shè)置元素在其父表單上的值。如果值為 null，則元素將不參與表單提交過程。
• form — 如果存在，則為元素的父表單的引用。
• setValidity(flags: Partial<validitystate>, message?: string, anchor?: HTMLElement): void</validitystate> — setValidity 方法將幫助控制元素在表單中的有效性狀態(tài)。如果表單無效，則必須存在驗(yàn)證消息。
• willValidate — 如果在提交表單時(shí)將評(píng)估元素，則為 true。
• validity — 一個(gè)有效性對(duì)象，與附加到 HTMLInputElement.prototype.validity 的 API 和語義匹配。
• validationMessage — 如果使用 setValidity 將控件設(shè)置為無效，則這是描述錯(cuò)誤的消息。
• checkValidity — 如果元素有效，則返回 true，否則返回 false 并觸發(fā)元素上的無效事件。
• reportValidity — 與 checkValidity 相同，如果事件未取消，則會(huì)向用戶報(bào)告問題。
• labels — 使用 label[for] 屬性標(biāo)記此元素的元素列表。
• 其他一些用于在元素上設(shè)置 aria 信息的控件。

設(shè)置自定義元素的值

讓我們修改我們的 <rad-input></rad-input> 以利用其中一些 API：

在這里，我們修改了元素的 _onInput 方法以包含對(duì) this.internals.setFormValue 的調(diào)用。這告訴表單我們的元素想要使用其給定的名稱（在我們的 HTML 中設(shè)置為屬性）在表單中注冊(cè)一個(gè)值。我們還添加了一個(gè) firstUpdated 方法（在不使用 LitElement 時(shí)與 connectedCallback 類似），該方法在元素完成渲染時(shí)將元素的值設(shè)置為空字符串。這是為了確保我們的元素始終具有表單的值（雖然不是必需的，但您可以通過傳入 null 值來將元素從表單中排除）。

現(xiàn)在，當(dāng)我們向輸入添加值并提交表單時(shí)，我們將在我們的 <output></output> 元素中看到一個(gè) radInput 值。我們還可以看到我們的元素已添加到 HTMLFormElement 的 radInput 屬性中。但是，您可能已經(jīng)注意到的一件事是，盡管我們的元素沒有值，它仍然允許表單提交。接下來，讓我們向我們的元素添加一些驗(yàn)證。

添加約束驗(yàn)證

為了設(shè)置字段的驗(yàn)證，我們需要稍微修改一下元素，以便使用元素內(nèi)部對(duì)象上的 setValidity 方法。此方法將接受三個(gè)參數(shù)（如果元素?zé)o效，則僅需要第二個(gè)參數(shù)，第三個(gè)參數(shù)始終是可選的）。第一個(gè)參數(shù)是部分 ValidityState 對(duì)象。如果任何標(biāo)志設(shè)置為 true，則控件將被標(biāo)記為無效。如果內(nèi)置有效性鍵之一不滿足您的需求，則可以使用通用的 customError 鍵。最后，如果控件有效，我們將傳入一個(gè)對(duì)象字面量 ({}) 來重置控件的有效性。

第二個(gè)參數(shù)是控件的有效性消息。如果控件無效，則需要此參數(shù)，如果控件有效，則不允許此參數(shù)。第三個(gè)參數(shù)是一個(gè)可選的驗(yàn)證目標(biāo)，如果表單提交無效或調(diào)用 reportValidity，則它將控制用戶的焦點(diǎn)。

我們將向我們的 <rad-input></rad-input> 引入一個(gè)新方法來處理此邏輯：

_manageRequired() {
  const { value } = this;
  const input = this.shadowRoot.querySelector('input');
  if (value === '' && this.required) {
    this.internals.setValidity({
      valueMissing: true
    }, 'This field is required', input);
  } else {
    this.internals.setValidity({});
  }
}

此函數(shù)獲取控件的值和輸入。如果值等于空字符串并且元素被標(biāo)記為必需，我們將調(diào)用 internals.setValidity 并切換控件的有效性?，F(xiàn)在我們需要做的就是在我們的 firstUpdated 和 _onInput 方法中調(diào)用此方法，我們就可以向我們的元素添加一些基本驗(yàn)證了。

在未向我們的 <rad-input></rad-input> 輸入值之前單擊提交按鈕，現(xiàn)在將在支持 ElementInternals 規(guī)范的瀏覽器中顯示錯(cuò)誤消息。不幸的是，polyfill 仍然不支持顯示驗(yàn)證錯(cuò)誤，因?yàn)樵诓恢С值臑g覽器中沒有可靠的方法來觸發(fā)內(nèi)置的驗(yàn)證彈出窗口。

我們還通過使用我們的 internals 對(duì)象向我們的示例添加了一些基本的輔助功能信息。我們向元素添加了一個(gè)附加屬性 _required，它將充當(dāng) this.required 的代理以及 required 的 getter/setter。

get required() {
  return this._required;
}

set required(isRequired) {
  this._required = isRequired;
  this.internals.ariaRequired = isRequired;
}

通過將 required 屬性傳遞給 internals.ariaRequired，我們正在提醒屏幕閱讀器我們的元素當(dāng)前需要一個(gè)值。在 polyfill 中，這是通過添加 aria-required 屬性來完成的；但是，在支持的瀏覽器中，不會(huì)將屬性添加到元素中，因?yàn)樵搶傩允窃毓逃械摹?/p>

創(chuàng)建微型表單

現(xiàn)在我們已經(jīng)有了一個(gè)符合我們?cè)O(shè)計(jì)系統(tǒng)的有效輸入，我們可能想要開始將我們的元素組合成可以在多個(gè)應(yīng)用程序中重復(fù)使用的模式。ElementInternals 最引人注目的功能之一是 setFormValue 方法不僅可以采用字符串和文件數(shù)據(jù)，還可以采用 FormData 對(duì)象。因此，假設(shè)我們想要?jiǎng)?chuàng)建一個(gè)可能在多個(gè)組織中使用的通用地址表單，我們可以使用我們新創(chuàng)建的元素輕松做到這一點(diǎn)。

在這個(gè)示例中，我們?cè)谠氐?shadow root 內(nèi)創(chuàng)建了一個(gè)表單，我們?cè)谄渲薪M合了四個(gè) <rad-input></rad-input> 元素來創(chuàng)建一個(gè)地址表單。這次我們沒有使用字符串調(diào)用 setFormValue，而是選擇傳遞表單的整個(gè)值。結(jié)果，我們的元素將其子表單內(nèi)每個(gè)單獨(dú)元素的值傳遞到外部表單。

向此表單添加約束驗(yàn)證將是一個(gè)相當(dāng)簡(jiǎn)單的過程，提供額外的樣式、行為和內(nèi)容插槽也是如此。使用這些較新的 API 最終允許開發(fā)人員在自定義元素中釋放大量潛力，并最終讓我們可以自由控制用戶體驗(yàn)。

以上是使用ElementInternals創(chuàng)建自定義表單控件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！