驗證不求人──發佈自己的 npm 驗證套件

6 min readJul 14, 2022

會寫這篇的原因除了是想紀錄自己寫驗證套件的經過（對我不記下來很快就會忘了。。），還有就是因為在工作上遇到需要寫一個前端的驗證方法，來應用在各個地方中，來減少每次寫驗證的程式量的情境，所以剛好透過這次機會把驗證程式跟npm套件兩個前端工程師必做事項（疑？有嗎？？）給完成！本文會著重在驗證的想法思路跟實作方法和NPM實際發布我所遇到的問題，NPM套件基礎發布教學這篇文章講解得很仔細！而文中所提到的套件連結/程式碼都會放在文末！

套件使用的技術：

Typescript
rollup (打包)
Github Action (CI/CD)

套件demo

正文開始：

前端常常會遇到需要下面這樣的需求，可能是一個表單或是單純一個input，在使用者submit 之後，前端會需要去判斷輸入的值是否正確，然後再坐下一步的處理（大部分會call 一個api給後端)。這樣的情況下，通常的處理方式，以 React 為例，會寫一個驗證function 來驗證input的值然後把驗證結果放在state裡面，然後透過Input 顯示紅字錯誤。


....<InputWrapper> username: <Input   value={username}   isError={errorValidation?.username?.msg}
   // INPUT 錯誤顯示   style={{ margin: “10px” }}   onChange={({ target: { value } }) => setUsername(value)} /></InputWrapper>
....

這樣寫是沒有問題，但是隨著程式碼越來越大，每次驗證都要寫一次其實會挺麻煩的，所以這時候 React-Client-Validation 就派上用場了！！（撒花🎉）

先來講講 React-Client-Validation 的output吧！

我的設計是想要它回傳object，然後裡面的key是錯誤index, value則是錯誤訊息。所以假設username是錯誤的話，會回傳一個 errorObject，裡面有錯誤的話會有錯誤訊息跟一個isPass 布林值，如果全部驗證都沒錯的話會回傳 true 不然會傳false，如下圖



let [isPass, errorObject] = handleValidation({…})isPass: falseerrorObject:
{
 username: {msg: 'User name is not valid!'}
}

而我們就可以輕鬆的把回傳值加到state然後使用錯誤訊息在username上！

<Input  isError={errorObject?.username?.msg}>
 <>  
  Username
  <ErrorText>{errorObject?.username?.msg || '' }</ErrorText>
 </>
</Input>

在Input的部分我的想法是用一個array去包多個含有驗證資訊的object，其中包含著以下幾個值。

{
  index:string 驗證的index
  condition: Array 驗證的情境 ex, [!username] 假設username是state中的值, 如果condition 結果是 true的話 會回傳錯誤訊息，反之，則代表驗證通過。
  errorMessage: string 錯誤的話回傳的值
  ...}

所以加上我們剛剛的output，基礎版的用法大概會長得像以下。。

const loginValidation = [
  {
    index: 'username',
    condition: [!username],
    errorMessage: 'User name is not valid!',
  },
  ... 
]const [isPass, loginErrorObject] = handleValidation({
  errorArray: loginValidation,
  defaultErrorMessage: "input can't be blank",
})

原本以為這樣就結束了，結果當然不會這麼容易（😭。實際情況下，還會可能遇到比較複雜的condition可能無法用array去解決，所以我就又加上幾個新的值到errorArray裡面變成現在完整版的樣子。

{
  index:string
  condition: Array 
  errorMessage: string
  errorFormat: Array: 可以設定回傳 錯誤訊息的格式
  customCondition: function 可以自由設定驗證條件。}

customCondition 的用法比較特別，我在這裡著時花了一些時間來思考要怎麼做才會比叫好，最後的想法是回傳兩個值 data 和 errorReturnArray, 然後在使用者必須回傳固定的errorReturnArray格式來告訴套件哪些驗證是錯誤的。用文字講的不清楚我們直接看使用範例吧！

{...,
customCondition: (data, errorReturnArray) => {
            if (!data.password) {
               errorReturnArray.push(false)
               // validation failed, will get fail message from the return error object
            }
        }
}errorReturnArray 的回傳格式是如果驗證通過就傳true, 不然傳false
所以errorReturnArray 可能會長得像這樣
[true, false, true, true]
以上就是第二個值沒通過驗證。

再加上customValidation之後這個套件終於是比較完整了！
我們就可以把他丟到npm上並且publish他，但我又剛好看到新的github action的推薦，就手癢把github action也加到專案中，讓我可以在push到github的時候就自動幫我build、加上版號並且publish 到npm上，但因為是第一次接觸github action 有些坑搞了很久才解決>> 還好是看到這篇文章（又是他XD）幫我解決了一些設定上的問題～～以上就是我第一次寫npm套件的一些心得～過程其實學習到不少東西也終於有種成為真正的工程師並且有能力為open source貢獻一己之力的感覺(?? 希望下次還有機會繼續寫出有趣的套件！！對這個套件有興趣或想法的各位大神們也請不要吝嗇盡情的PR！

實作DEMO

NPM react-client-validation

套件Github

驗證不求人──發佈自己的 npm 驗證套件

正文開始：

Written by water