一個 bug 一年損失440萬美元：maxlength＝「2」
作者：JasonGrigsby是Cloud Four、Mobile Portland和Responsive Field Day的聯合創始人。
最近我發現老媽還沒有找到她的信用卡，我就已經在匆忙填寫墨西哥燒烤連鎖店Chipotle的在線訂購表單了。在此過程中，我發現了一個可能使Chipotle每年損失440萬美元的錯誤（bug）。
父母已雙雙退休，他們繼續嘗試用信用卡付餐費。我不希望老兩口這樣做。於是，我們常常到頭來比誰完成先付錢。
這種情況下，我知道自己有優勢。我的信用卡詳細信息已存儲在瀏覽器中，只需使用自動填寫（autofill）功能，在老媽找到信用卡之前即可快速填好表單、完成訂單。
遺憾的是，表單一提交就返回了錯誤：
Chipotle的訂購表單顯示了兩個錯誤以及表明「更改付款方法」的文字。
這個時候，我仍一心想著與老媽比誰手腳快，於是馬上從1Password複製了我的信用卡信息，完成了交易。
後來，我想知道這是不是自動填寫功能的問題。過去我寫過很多有關自動填寫的文章；要是自動填寫有問題，我想搞個明白。
Chipotle古怪的錯誤消息
Chipotle的錯誤消息並沒有給我太多幫助。第一個錯誤顯示：
「我們在保存您的卡時遇到了錯誤。請核查您的卡信息，然後重試。」
什麼鬼？我並沒有要求Chipotle保存我的卡。我有意讓該框不勾選。
儘管這很煩人，但直覺告訴我導致該問題的並不是這個錯誤。如果我勾選該框，遇到了同樣的錯誤。我懷疑第二個錯誤才是阻止我購買午餐的原因。
糟糕的是，第二個錯誤並沒有提供任何有用的信息：
「我們在提交您的訂單時遇到了錯誤，請重試。」
每次我自動填寫並提交表單，都會遇到同樣的兩個錯誤。如果我不使用自動填寫功能，表單毫無問題。
後來我有所發現。信用卡到期日期在填寫後已更改。自動填寫功能會嘗試輸入2023作為年份，卻改成了20。
這就是罪魁禍首。我的信用卡將在2023年到期。該欄位僅接受兩位數字；表單收到的是20，而不是代表2023年的23。
由於我可以重現這個問題，我想弄清楚為什麼會這樣。這是自動填寫功能的問題還是Chipotle的表單的問題？
是時候偵查一番了
我想弄清楚為什麼瀏覽器沒有按我們要求的方式運行。這就像一部優秀的懸疑小說，但你得解開謎底。在這種情況下，我查看的第一個線索是到期年份欄位的HTML：
許多類以ng-開頭。這是Angular的一個明顯標誌。
接下來，我深入研究Chipotle的JavaScript，查找什麼在引用cmg-cc-expiration-validator，這聽起來像是用來對該欄位進行驗證的一個關鍵屬性。我在Chipotle的應用JS文件中找到了要找的東西。我把相關部分併入到gist，萬一Chipotle將來在JavaScript中更改時可供參照。
在驗證部分的約400行代碼中，該引用引起了我的注意：
這是掩蓋UI的Angular模塊？快速搜索後，找到了ui-mask的github代碼庫。我之前發現的Chipotle的JavaScript代碼似乎在使用該模塊。
ui-mask對到期欄位執行什麼操作？
發現ui-mask模塊後，我之前忽略的輸入欄位的其中一個屬性突然變得重要起來：
ui-mask文檔提供了該示例：
For example, we use "9" here to accept any numeric values for a phone number: ui-mask="(999) 999-9999"
因此，到期年份欄位上的ui-mask="99"告訴ui-mask模塊僅接受兩個數字值。自動填寫嘗試輸入2023時，該ui-mask只允許輸入前兩個字元。
Web標準的替代方案
我確信，Chipotle使用ui-mask模塊有其充分的理由。我不想讓人覺得好像我在質疑他們的決定。我只是對該模塊對多個欄位來說有用，在該網站上用於其他用途表示懷疑。
然而就這個到期年份欄位而言，我們可以使用兩個標準的HTML5屬性完成同樣的操作：
pattern屬性使用正則表達式來驗證用戶的輸入符合我們要求的內容。在這種情況下，\d告訴瀏覽器我們需要一個數字字元。通過兩次提供\d，我們告訴瀏覽器我們想要兩位數字，那樣接受01，但不接受1。
maxlength屬性告訴瀏覽器允許多少個字元，將阻止用戶輸入數量超過分配數的字元。
修復自動填寫
為了測試如果Chipotle的表單使用這些標準會發生什麼情況，我打開了瀏覽器的開發者工具，編輯了到期年份欄位。
將maxlength屬性添加到該欄位可解決此問題。這有其道理。我們告訴瀏覽器、進而告訴自動填寫功能到期年份應使用幾位數。
自動填寫足夠智能化，知道如果我們只希望兩位數用作年份欄位，知道表單需要年份的後兩位數。我們只需告訴瀏覽器我們要求幾位數。
我們還需要以一種標準的方式來告訴它。
這對Chipotle的業務有什麼影響？
謎底已解開，我想知道這個問題會給Chipotle造成多大的損失。我第一次遇到這個錯誤時（早在與老媽比試信用卡之前），以為Chipotle的網站壞了。我放棄嘗試在線訂購。
另外有多少人因表單不支持自動填寫、錯誤消息毫無幫助而沒有完成訂單？
我們知道，人們使用自動填寫後，完成表單的速度提高了30%，但我們不知道總體上有多少人在使用自動填寫功能。
因此，由於我們不知道多少人在使用自動填寫功能，不妨使用保守的數字。
如果Chipotle通過修復自動填寫功能可以使交易量提高半個百分點，將會怎樣？
我們能否計算出Chipotle在交易量提高半個百分點之後收入會有多少？我們也許能。
Chipotle在2019年4月的季度報告中透露，「公司重新上線的網站平均每周吸引100萬筆交易。」2018年Chipotle表示，在線訂單的平均金額是「16美元至17美元」。
我將使用該範圍的上限（17美元）作為在線訂單的平均金額，因為那個平均數是一年前的；今年7月，Chipotle報告「第二季度的在線銷售額幾乎翻番」，「平均消費額提高了3.5%。」
從最近收益報告中的信息來看，每筆在線訂單的平均金額為17美元、每周100萬筆交易可能偏低。這非常適合我們試圖進行保守的估計。
maxlength="2"值多少錢？
不妨計算一下：
如果修復自動填寫功能使在線訂單增加半個百分點，那麼Chipotle的收入有望增加440萬美元。
但也許半個百分點太高了。不妨改而四分之一個百分點，那仍然有220萬美元。
Web表單方面的經驗教訓
你可以從Chipotle的訂購表單中汲取三大經驗教訓：
使用HTML5輸入功能：為欄位選擇正確的輸入類型。使用其他輸入屬性（比如maxlength、minlength和pattern），為瀏覽器提供有關該欄位要求什麼信息的額外線索。
支持自動填寫：為自動完成屬性添加適當的權標（token），向自動填寫功能告知欄位的用途。現在這是支持自動填寫功能的標準方法。
使自動填寫功能成為測試計劃的一部分：一旦你的表單與自動填寫功能結合使用，在質量保證（QA）流程中加入自動填寫功能，確保表單繼續正常工作。這可以幫助你及時找出類似Chipotle表單遇到的問題，以免影響用戶。
PS：Chipotle，如果本文有所幫助，下回可以請我父母吃午餐嗎？
另外，如果貴公司從本文中賺到440萬美元，應聘請我們幫助你們搞好漸進式Web應用程序和付款請求API。
最初我建議將欄位類型從text改為number以強制使用數值。然而，Amier在留言中指出數字不接受maxlength。相反，number要求你使用min和max來設置最小值和最大值。我進行了一番測試，結果發現使用那些值解決不了自動填寫問題。沒關係。我們希望01而不是1作為到期年份，這意味著我們實際上要求兩位數，而不是一個數字。因此，將輸入類型設置為text，並使用pattern屬性將輸入限制在兩位數來得更明智。
