寫(xiě)在前面的話

看這篇文章之前，你需要掌握的知識(shí):

背景

form 可以說(shuō)是 web 開(kāi)發(fā)中的最大的難題之一。跟普通的組件相比，form 具有以下幾個(gè)特點(diǎn):

1、更多的用戶交互。
這意味著可能需要大量的自定義組件，比如 DataPicker，Upload，AutoComplete 等等。

3、頻繁的狀態(tài)改變。
每當(dāng)用戶輸入一個(gè)值，都可能會(huì)對(duì)應(yīng)用狀態(tài)造成改變，從而需要更新表單元素或者顯示錯(cuò)誤信息。

3、表單校驗(yàn)，也就是對(duì)用戶輸入數(shù)據(jù)的有效性進(jìn)行驗(yàn)證。
表單驗(yàn)證的形式也很多，比如邊輸入邊驗(yàn)證，失去焦點(diǎn)后驗(yàn)證，或者在提交表單之前驗(yàn)證等等。

4、異步網(wǎng)絡(luò)通信。
當(dāng)用戶輸入和異步網(wǎng)絡(luò)通信同時(shí)存在時(shí)，需要考慮的東西就更多了。就比如 AutoComplete，需要根據(jù)用戶的輸入去異步獲取相應(yīng)的數(shù)據(jù)，如果用戶每輸入一次就發(fā)起一次請(qǐng)求，會(huì)對(duì)資源造成很大浪費(fèi)。因?yàn)槊恳淮屋斎攵际?code>異步獲取數(shù)據(jù)的，那么連續(xù)兩次用戶輸入拿到的數(shù)據(jù)也有可能存在 "后發(fā)先至" 的問(wèn)題。

正因?yàn)橐陨线@些特點(diǎn)，使 form 的開(kāi)發(fā)變得困難重重。在接下來(lái)的章節(jié)中，我們會(huì)將 RxJS 和 Form 結(jié)合起來(lái)，幫助我們更好的去解決這些問(wèn)題。

HTML Form

在實(shí)現(xiàn)我們自己的 Form 組件之前，讓我們先來(lái)參考一下原生的 HTML Form。

保存表單狀態(tài)

對(duì)于一個(gè) Form 組件來(lái)說(shuō)，需要保存所有表單元素的信息(如 value, validity 等)，HTML Form 也不例外。

那么，HTML Form 將表單狀態(tài)保存在什么地方？如何才能獲取表單元素信息？

主要有以下幾種方法:

document.forms[0].elements[0].value; // 獲取第一個(gè) form 中第一個(gè)表單元素的值const form = document.querySelector("form");form.elements[0].value; form.addEventListener('submit', function(event) { console.log(event.target.elements[0].value);});

Validation

表單校驗(yàn)的類型一般分為兩種:

內(nèi)置表單校驗(yàn)。默認(rèn)會(huì)在提交表單的時(shí)候自動(dòng)觸發(fā)。通過(guò)設(shè)置 novalidate 屬性可以關(guān)閉瀏覽器的自動(dòng)校驗(yàn)。

JavaScript 校驗(yàn)。

<form novalidate> <input name='username' required/> <input name='password' type='password' required minlength="6" maxlength="6"/> <input name='email' type='email'/> <input type='submit' value='submit'/></form>

存在的問(wèn)題

定制化很難。 比如不支持 Inline Validation，只有 submit 時(shí)才能校驗(yàn)表單，且 error message 的樣式不能自定義。