前言
在进行表单验证时，提示信息往往也是必不可少的一部分。一般情况下，我们需要根据具体的验证规则去手动书写相应的提示信息。但是，这一过程通常繁琐且容易出错。这时候，使用 npm 包 validation-msgs-react 可以方便地生成验证提示消息，提高开发效率，减少失误。
安装
在开始使用 validation-msgs-react 之前，我们需要在项目中安装该 npm 包。使用 npm 安装命令：
npm install validation-msgs-react --save
使用
引入 validation-msgs-react：
import Msg from 'validation-msgs-react';
然后，就可以使用 Msg 来生成对应的提示信息。
1. 验证规则及对应提示信息
首先，我们需要定义验证规则及对应的提示信息。比如，一个用户注册表单，我们需要验证用户名和密码的长度。
const validationMessages = {
username: {
minLength: '用户名不能少于 6 个字符'
},
password: {
minLength: '密码长度不能少于 8 个字符'
}
};2. 表单数据
接下来，我们需要定义表单数据。这里我们用两个 state 分别表示用户名和密码：
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');3. 验证函数
然后，我们可以定义一个验证函数，用来检测输入是否符合验证规则：
-- -------------------- ---- -------
----- --------- - ---------- -- -
----- ------ - ---
-- ------------------------- - -- -
--------------- - -------- - -----
-
-- ------------------------- - -- -
--------------- - --------- - -----
-
------ -------
--如果验证失败，返回一个错误对象。如果验证成功，返回空对象。
这里的 formData 参数就是整个表单数据对象，包含了所有表单项。
4. 验证提示
在表单组件中，我们需要编写相应的 JSX 代码来使用 validation-msgs-react。
-- -------------------- ---- ------- ------ ------ ------------------------------- ------ ----------- --------------- ---------------- ------------- -- ---------------------------- -- ---- -------------- -------------------------------------- -- --- -- ------ ------------------------------ ------ --------------- --------------- ---------------- ------------- -- ---------------------------- -- ---- -------------- -------------------------------------- -- --- -- ------- ------------------------- -------
在 input 与对应的 Msg 组件中，我们需要设置相同的 for 属性，messages 属性则为对应的验证提示信息对象。
这样，当 input 框的值不符合验证规则时，Msg 组件会自动显示对应的提示信息。
总结
使用 validation-msgs-react 可以帮助我们更快地生成表单验证提示信息，提高开发效率，减少出错。在项目中，我们可以结合实际需要进行相应的调整，达到最佳使用效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bd581e8991b448e5770