表單在數(shù)位世界中無處不在，從簡(jiǎn)單的新聞通訊註冊(cè)到複雜的企業(yè)應(yīng)用程式。雖然基本表單可以使用 Formik 或 React Hook Form 等流行工具輕鬆處理，但企業(yè)級(jí)表單仍然面臨著重大挑戰(zhàn)現(xiàn)有解決方案難以解決。

什麼是企業(yè)級(jí)表單？

企業(yè)級(jí)表單不只是簡(jiǎn)單的輸入欄位和提交按鈕。它們是金融、銀行和保險(xiǎn)等產(chǎn)業(yè)複雜工作流程的支柱。這些表單必須平衡進(jìn)階功能、可擴(kuò)充性和使用者體驗(yàn)，使它們與簡(jiǎn)單的對(duì)應(yīng)形式有根本的不同。

企業(yè)級(jí)表單範(fàn)例

• 貸款申請(qǐng)：動(dòng)態(tài)計(jì)算利率、每月付款和債務(wù)收入比 即時(shí)。他們必須根據(jù)信用評(píng)分和收入驗(yàn)證要求執(zhí)行監(jiān)管合規(guī)規(guī)則，例如最高貸款金額。

• 稅務(wù)申報(bào)：多頁表格，可處理不同收入來源、扣除額和抵免。他們需要根據(jù)稅務(wù)機(jī)關(guān)規(guī)則進(jìn)行驗(yàn)證，支援在多個(gè)會(huì)話中保存草稿，並指導(dǎo)使用者完成複雜的工作流程，例如逐項(xiàng)扣除與標(biāo)準(zhǔn)扣除。

• 保險(xiǎn)索賠

  ：根據(jù)索賠類型（汽車、房屋、人壽）和保單詳細(xì)資料進(jìn)行調(diào)整的複雜表格。他們使用現(xiàn)有客戶資料預(yù)填字段，處理文件附件作為證據(jù)，實(shí)施複雜的驗(yàn)證規(guī)則（例如，索賠金額不能超過保單限制），並在各種保險(xiǎn)產(chǎn)品之間保持一致的品牌，以將其與競(jìng)爭(zhēng)對(duì)手區(qū)分開來.

這些例子在日常生活中很常見，但隱藏在這些形式背後的努力卻常常被忽略。它們的開發(fā)需要各種人才之間的協(xié)作、複雜的架構(gòu)、頂級(jí)的工程團(tuán)隊(duì)以及長(zhǎng)達(dá)數(shù)年的開發(fā)時(shí)間。在一些中小企業(yè)，甚至有可能整個(gè)公司的產(chǎn)品都是建立在這樣一個(gè)單一的形式上。

這種關(guān)鍵任務(wù)但成本高昂的表單就是我所說的「企業(yè)級(jí)表單」。

建構(gòu)

企業(yè)級(jí)

表單的挑戰(zhàn) 假設(shè)您是一家建立線上貸款申請(qǐng)表的金融公司。您可能面臨哪些挑戰(zhàn)？

• 非技術(shù)利益相關(guān)者的參與：貸款很複雜，涉及金融、會(huì)計(jì)和法律領(lǐng)域的專業(yè)知識(shí)——這些專業(yè)知識(shí)通常由非技術(shù)利益相關(guān)者掌握。這些利害關(guān)係人了解複雜的業(yè)務(wù)規(guī)則，例如「如果申請(qǐng)人的信用評(píng)分低於650，則需要共同簽署人」或「使用每月總收入除以計(jì)算債務(wù)與收入比率”每月總債務(wù)支付「。一個(gè)重大挑戰(zhàn)是使這些利害關(guān)係人能夠有效地領(lǐng)導(dǎo)表單設(shè)計(jì)，而無需花費(fèi)過多的時(shí)間教導(dǎo)開發(fā)人員所有規(guī)則，同時(shí)確保處理邊緣情況的順利協(xié)作。

• 品牌 UI 和自訂 UX：開發(fā)人員也很重要！公司不想要千篇一律的表單設(shè)計(jì)。每個(gè)認(rèn)真的企業(yè)都希望打造自己的品牌並提供獨(dú)特的使用者體驗(yàn)，這些目標(biāo)需要開發(fā)人員的專業(yè)知識(shí)才能實(shí)現(xiàn)。例如，銀行可能希望其貸款申請(qǐng)與其品牌顏色相符、使用自訂輸入組件或?qū)崿F(xiàn)逐步嚮導(dǎo)介面，引導(dǎo)用戶完成「?jìng)€(gè)人資訊」、「僱用詳情」和「貸款條款」。

• 計(jì)算、公式和動(dòng)態(tài)行為：一份貸款申請(qǐng)表可能需要各種複雜的即時(shí)計(jì)算和動(dòng)態(tài)行為。

  • 財(cái)務(wù)計(jì)算：貸款金額、利率、每月付款等
  • 條件邏輯：根據(jù)貸款類型顯示/隱藏欄位（例如，抵押貸款與個(gè)人貸款的不同欄位）
  • 跨領(lǐng)域依賴關(guān)係：更新收入可能會(huì)影響最大貸款金額、債務(wù)收入比和利率
  • 即時(shí)驗(yàn)證：確保貸款金額維持在基於收入和信用評(píng)分的政策限額內(nèi)

• 自動(dòng)儲(chǔ)存和復(fù)原：複雜的表單可以有數(shù)百個(gè)欄位 - 使用者如果不小心關(guān)閉瀏覽器就不想重新開始。

• 其他技術(shù)挑戰(zhàn)：

  • 效能：以流暢的 UI 回應(yīng)能力高效處理數(shù)百個(gè)字段，確?？焖儆?jì)算和無縫渲染
  • 驗(yàn)證：全面的驗(yàn)證策略，包括用於即時(shí)用戶回饋的即時(shí)用戶端驗(yàn)證和用於資料完整性和安全性的強(qiáng)大伺服器端驗(yàn)證
  • 資料預(yù)先填充：從多個(gè)資料來源填充欄位

這些不是特定場(chǎng)景的小眾問題，而是企業(yè)在建立複雜表單時(shí)面臨的常見挑戰(zhàn)。業(yè)務(wù)複雜性、技術(shù)要求和使用者體驗(yàn)需求的結(jié)合使得企業(yè)級(jí)表單的有效實(shí)施特別具有挑戰(zhàn)性。

現(xiàn)有工具的不足之處

雖然像 Formik 和 React Hook Form 這樣流行的表單庫非常適合處理基本表單，但它們並不是根據(jù)企業(yè)需求而建立的。在我們之前討論的挑戰(zhàn)的背景下檢查這些工具時(shí)，一些限制變得顯而易見：

挑戰(zhàn) 1：非技術(shù)利害關(guān)係人的參與

目前的表單庫以開發(fā)人員為中心，需要 JavaScript/TypeScript 知識(shí)來定義表單邏輯。

這增強(qiáng)了客製化能力，但顯著降低了交付包含複雜規(guī)則的表單的效率。例如：

• 當(dāng)表單規(guī)則涉及複雜的計(jì)算時(shí)，利益相關(guān)者被迫用諸如「計(jì)算最高貸款金額為年收入的4倍」等口頭描述向開發(fā)者進(jìn)行一步步解釋，如果信用評(píng)分低於700，則下調(diào)15%，並進(jìn)一步降低現(xiàn)有每月債務(wù)支付佔(zhàn)月總收入的百分比，如果就業(yè)歷史低於700，則額外降低10% 2年”，儘管這些計(jì)算可能是其專業(yè)領(lǐng)域的常識(shí)。

• 當(dāng)表單規(guī)則需要修改時(shí)，例如調(diào)整貸款限額，利害關(guān)係人仍需要依賴開發(fā)人員來實(shí)施更改，導(dǎo)致流程更長(zhǎng)，交付時(shí)間延長(zhǎng)。

挑戰(zhàn) 2：品牌 UI 和客製化 UX

兩個(gè)現(xiàn)有庫在這方面都表現(xiàn)出色（由於它們以開發(fā)人員為中心性質(zhì)），提供了強(qiáng)大的定制功能。例如，React Hook Form 提供了一個(gè) Controller 元件來適應(yīng)受控輸入元件。

挑戰(zhàn) 3：計(jì)算、公式與動(dòng)態(tài)行為

現(xiàn)有的函式庫提供了「just-works」的運(yùn)算能力，但缺乏複雜運(yùn)算的抽象化和組織能力。

考慮在 React Hook Form 中實(shí)作貸款計(jì)算器：

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

這種方法有幾個(gè)缺點(diǎn)：

• 用 JavaScript 寫：它拒絕非技術(shù)利害關(guān)係人和開發(fā)人員之間的協(xié)作。
• 手動(dòng)維護(hù)欄位依賴: watch(['loanAmount', 'interestRate', 'term'])
• 欄位定義與賦值分離：本例中，monthlyPayment 註冊(cè)在 return 語句中，但賦值在 useEffect 中
• 額外的樣板代碼：watch、setValue、useEffect
• 手動(dòng)效能最佳化

挑戰(zhàn) 4：自動(dòng)儲(chǔ)存與恢復(fù)

這些庫中沒有用於自動(dòng)保存和恢復(fù)的內(nèi)建解決方案。實(shí)現(xiàn)自動(dòng)保存功能需要大量的自訂程式碼。開發(fā)人員必須處理：

• 高效率的狀態(tài)持久化
• 解決衝突
• 資料同步
• 進(jìn)度追蹤
• 錯(cuò)誤回復(fù)

---

這些限制為企業(yè)應(yīng)用程式帶來了巨大的開發(fā)開銷、更長(zhǎng)的上市時(shí)間和更高的維護(hù)成本。雖然有解決方法，但它們通常會(huì)導(dǎo)致複雜、脆弱的解決方案，難以維護(hù)和擴(kuò)展。

FormML 透過其專為企業(yè)級(jí)表單設(shè)計(jì)的特定領(lǐng)域語言和架構(gòu)來解決這些挑戰(zhàn)，我們將在下一節(jié)中探討。

FormML 解決方案

FormML，是表單建模語言的縮寫，發(fā)音為“正式”，是一個(gè)新的開源框架，專門為解決企業(yè)級(jí)表單的挑戰(zhàn)而設(shè)計(jì)。以下是它如何彌補(bǔ)其他工具留下的空白：

賦予非技術(shù)利害關(guān)係人權(quán)力

如其全名「表單建模語言」所示，F(xiàn)ormML 引入了一種直觀且非開發(fā)人員友好的領(lǐng)域特定語言 (DSL)。其簡(jiǎn)單的結(jié)構(gòu)、最少的語法和自然的術(shù)語使財(cái)務(wù)專家、法律專業(yè)人士和其他非技術(shù)利益相關(guān)者能夠在不需要程式設(shè)計(jì)技能的情況下對(duì)表單進(jìn)行建模。

要建立一個(gè)最簡(jiǎn)單的可運(yùn)行報(bào)稅表，無需任何程式設(shè)計(jì)知識(shí)的熟練會(huì)計(jì)師只需 5 分鐘即可完成：

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

完全可自訂的使用者體驗(yàn)

FormML 採用了強(qiáng)大的模型視圖分離架構(gòu)，可以將表單邏輯與 UI 呈現(xiàn)徹底解耦。領(lǐng)域?qū)＜沂褂?FormML DSL 在 .fml 檔案中定義表單的結(jié)構(gòu)、類型和行為（「模型」）。

這種分離使開發(fā)人員能夠完全專注於打造精美的自訂 UI 體驗(yàn)（「視圖」），並具有與其他表單庫相同的靈活性，而無需擔(dān)心底層業(yè)務(wù)邏輯。

function LoanForm() {
  const { watch, setValue } = useForm()

  const [loanAmount, interestRate, term] = watch([
    'loanAmount',
    'interestRate',
    'term',
  ])

  useEffect(() => {
    if (loanAmount && interestRate && term) {
      const monthlyRate = interestRate / 100 / 12
      const months = term * 12
      const payment =
        (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, months)) /
        (Math.pow(1 + monthlyRate, months) - 1)
      setValue('monthlyPayment', payment.toFixed(2))
    }
  }, [loanAmount, interestRate, term, setValue])

  return (
    <form>
      {/* ... */}
      <input type="number" {...register('monthlyPayment')} />
      {/* ... */}
    </form>
  )
}

開箱即用的動(dòng)態(tài)行為支持

FormML 將動(dòng)態(tài)行為視為一等公民。它透過 JavaScript 表達(dá)式 或 類似 Excel 的公式 系統(tǒng)（WIP）直接在其 DSL 中支援即時(shí)計(jì)算。例如，根據(jù)上面範(fàn)例中的輸入欄位計(jì)算稅費(fèi)非常簡(jiǎn)單，並且只需要很少的工作。

開箱即用的自動(dòng)儲(chǔ)存和復(fù)原支持

FormML 也將自動(dòng)保存和復(fù)原視為一等公民。它計(jì)劃支援狀態(tài)持久性、衝突解決、資料同步、進(jìn)度追蹤和開箱即用的錯(cuò)誤復(fù)原。

期待

雖然基本表單已經(jīng)基本解決，但企業(yè)級(jí)表單仍面臨獨(dú)特的挑戰(zhàn)。 FormML 在解決這些長(zhǎng)期存在的問題方面向前邁出了一步，提供了一個(gè)平衡功能、靈活性和易用性的全面解決方案。

無論您是在應(yīng)對(duì)複雜的運(yùn)算、動(dòng)態(tài)行為或團(tuán)隊(duì)之間的協(xié)作，F(xiàn)ormML 都提供了專門針對(duì)企業(yè)級(jí)表單挑戰(zhàn)而設(shè)計(jì)的框架。

準(zhǔn)備好應(yīng)對(duì)您的企業(yè)表單挑戰(zhàn)了嗎？關(guān)注我在 X 或 Bluesky 上的帳戶，並在首次發(fā)布後嘗試！

以上是超越基本表單：為什麼企業(yè)級(jí)表單仍然是一個(gè)挑戰(zhàn)（以及 FormML 如何解決它）的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！