验证不求人 — — 发布自己的 npm 验证套件

会写这篇的原因除了是想纪录自己写验证套件的经过（对我不记下来很快就会忘了。。），还有就是因为在工作上遇到需要写一个前端的验证方法，来应用在各个地方中，来减少每次写验证的程式量的情境，所以刚好透过这次机会把验证程式跟npm套件两个前端工程师必做事项（疑？有吗？？）给完成！本文会着重在验证的想法思路跟实作方法和NPM实际发布我所遇到的问题，NPM套件基础发布教学 这篇文章 讲解得很仔细！而文中所提到的套件连结/程式码都会放在文末！

套件使用的技术：

正文开始：
前端常常会遇到需要下面这样的需求，可能是一个表单或是单纯一个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，如下图

import handleValidation from ‘react-client-validation’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, 然后在customCondition中使用者必须回传固定的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！

NPM react-client-validation

套件github