前言
在前端开发过程中，常常会需要使用到各种第三方库或者工具来提高生产力或者简化开发流程。而npm是一个极其常用的第三方包管理工具，通过npm我们可以方便地获取、安装和更新各种第三方包。
在本文中，我们将介绍一个npm包khard/formsy-material-ui-0-6-3-popover-fix，该包主要解决了material-ui在使用formsy-react表单验证时出现的一个UI Popup显示问题。
简介
khard/formsy-material-ui-0-6-3-popover-fix 是基于material-ui封装的一个表单验证组件，该组件在原有material-ui基础上，通过修复formsy-react产生的UI Popoer显示问题，提供了更好的表单验证体验。
安装
使用npm进行安装：
npm install @khard/formsy-material-ui-0-6-3-popover-fix --save
注意：此组件基于material-ui，请确保已经安装了material-ui。
使用
在项目中引入组件：
-- -------------------- ---- ------- ------ ------ ---- --------------- ------ - ----------- ----------- ----------- ------------- --------------- ----------------- ------------ - ---- ----------------------------------------------
既然遇到了这个库，想必已经了解formsy-react的使用，下面我们就来看一下如何使用该组件。
首先，我们初始化一个formsy-react的表单：
-- -------------------- ---- -------
------ ------ ---- ---------------
------ -
-----------
-----------
-----------
-------------
---------------
-----------------
------------
- ---- ----------------------------------------------
----- ------ - -------------------
---------------- -------- -- -
------ - ---------- ----- --
--
------------- -------- -- -
--------------- ---------- ---- ---
--
-------------- -------- -- -
--------------- ---------- ----- ---
--
----------- -------- ------ -
----------------------------
--
------- -------- -- -
------ -
------------
---------------------------
------------------------------
-------------------------------
-
--- ---- ------ -- ---- - --- --- ---- ---- ---
--------------
--
--
---然后，我们添加一些表单元素：
<FormsyText hintText="First Name" name="first-name" required /> <FormsyText hintText="Last Name" name="last-name" required /> <FormsyDate name="birthday" required />
这里FormsyText和FormsyDate都是@khard/formsy-material-ui-0-6-3-popover-fix提供的组件，当然你可以使用其它组件进行开发。
最后，添加一个提交按钮：
<Formsy.Form
onValid={this.enableButton}
onInvalid={this.disableButton}
onValidSubmit={this.submitForm}
>
{/* Form inputs go here */}
<RaisedButton type="submit" label="Submit" disabled={!this.state.canSubmit} />
</Formsy.Form>至此，我们已经完成了一个简单的formsy-react开发示例。
深度思考
虽然本文中介绍的是一个UI Popup显示问题，但是在实际的开发过程中，我们往往需要考虑更复杂和更实际的问题。例如：表单验证的使用频率、校验错误的展示方式、表单验证的错误提示等。
在这里，我们可以将上述问题进行具体的探讨：
表单验证的使用频率
对于某些表单元素而言，校验需要在用户交互中多次进行。例如：输入框的输入过程中，相关的校验也需要及时展示。此时，我们可以通过onBlur、onChange等事件，监听校验的变化，及时展示校验结果。
<FormsyText hintText="Email" name="email" validations="isEmail" validationError="Please enter a valid email." onBlur={this.validateEmail} onChange={this.validateEmail} required />在这里，我们添加了两个事件监听器onBlur和onChange，通过监听输入框的输入变化，及时展示校验结果。validateEmail方法即为表单元素校验的方法。
实际上，我们还可以通过debounce、throttle等技巧进行优化，避免频繁的校验和界面更新操作。
校验错误的展示方式
虽然表单验证是一个很有用的功能，但是样式并不好看并且不直观。通常，我们需要对校验错误进行一些优化。
通过material-ui提供的API，我们可以修改表单验证错误的展示方式：
<FormsyText hintText="Email" name="email" validations="isEmail" validationError={<span style={{fontSize: 12, color: 'red'}}>Please enter a valid email.</span>} onBlur={this.validateEmail} onChange={this.validateEmail} required />在这里，我们定义了一个新的样式，并且通过validationError属性，来指定错误的展示方式。
表单验证的错误提示
在校验错误的展示方式中，红色字体并不能很好地提示用户输入错误的内容。因此，我们还需要添加一些提醒和帮助，例如：helperText和errorText。
-- -------------------- ---- ------- ----------- ---------------- ------------ --------------------- ---------------------- ----------------- --- ------ -------------- ----- - ----- -------------- --------------------------- ----------------------------- -------- ------------------ ----- - ----- ----- -------- --------------- ----- -- --------- --
在这里，我们添加了helperText和errorText，用来提供更加详细的错误提示和提示信息。
结语
在本文中，我们介绍了一个npm包khard/formsy-material-ui-0-6-3-popover-fix，该包主要解决了material-ui在使用formsy-react表单验证时出现的一个UI Popup显示问题。除此之外，我们还讨论了表单验证的使用频率、校验错误的展示方式、表单验证的错误提示等问题。
在实际的开发中，表单验证是一个非常基础和必要的功能。希望本文的介绍和探讨可以帮助大家更加深入地理解表单验证的相关细节和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6151ab1864dac672e3