简介
react-validating-controlled 是一个用来验证表单输入的 React 组件。在编写表单时，尤其是在前端表单设计中，我们经常需要对表单输入进行信任和安全性验证。这个组件可以在用户输入值变化时执行验证，并显示错误消息。
下面将介绍如何使用这个 npm 包。
安装
首先，我们需要安装这个 npm 包，可以使用 npm 命令行工具：
npm install react-validating-controlled -S
或者使用 yarn：
yarn add react-validating-controlled
使用
react-validating-controlled 可以很容易地嵌入到 React 表单中，比如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------------------- - ---- ------------------------------ ----- ------ ------- --------------- - ------------------ - ------------- ---------- - - ----- --- -- - ------------ - --- -- - ------------------- -- -------------------------- - ---------------- - ------ -- - --------------- ---- --- - -------- - ----- - ---- - - ----------- ------ - ----- ----------------------------- ------- ----- --------------------- ------------ -------------------------------- ------------------------- ------------------------------ -- -------- ------ ------------- -------------- -- ------- -- - - ------ ------- -------展开代码
上面的例子中，我们在表单中引入了 ValidatingControlled 组件，可以看到有几个重要的属性。
value属性：组件展示的值。onChange属性：当输入改变时，我们可调用handleNameChange方法更新值。validators属性：要使用的验证函数数组。errorClassName属性：自定义错误消息的样式，可以在 CSS 文件中设置它。
这些属性将会在下面详细介绍。
属性
value
组件展示的值，它是必需的。
<ValidatingControlled value={value} />
onChange
当输入改变时，我们可调用 onChange 方法更新值，并为输入执行验证。
<ValidatingControlled value={value} onChange={handleChange} />
validators
要使用的验证函数数组，它提供了标准的验证函数，比如“必填”和“电子邮件”。
<ValidatingControlled value={value} validators=['required', 'email'] />
目前可用的验证函数列表如下：
required：输入必填digital：输入必须是数字email：输入必须是电子邮件地址max-length：输入字符数不能超过指定数量min-length：输入字符数不能低于指定数量pattern：输入必须符合指定正则表达式
我们也可以通过 addValidator 来自定义一个新的验证函数：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------------------- ------------ - ---- ------------------------------ -------------- ----- ----------- ---------------- -------- - ----- - ---------- --------- - - -------- -- ---------- -- ------------ - ---------- - ------ --------- ------------ ----- - -- ---------- -- ------------ - ---------- - ------ ---------- ------------ ----- - -- ------------------- - ------ ----------- - -- ------------------------- - ------ ----------- - ------ ----- -- --- ----- ------ ------- --------------- - ----- - - --------- --- ---------------- --- -- -------------------- - ---------- -- - --------------- -------- --- - --------------------------- - ----------------- -- - --------------- --------------- --- - -------- - ----- - --------- --------------- - - ----------- ------ - ------ ------- --- --------------------- ---------------- ------------------------------------ ------------- - ----- ----------- -------- - ---------- -- ---------- -- - -- -- ------------------------------ -- -------- ------- ----- --------------------- ----------------------- ------------------------------------------- ------------- - ----- ---------- -- - ----- ------------------- -------- - --------- -------- -- -- -- ------------------------------ -- -------- ------- -- - -展开代码
errorClassName
自定义错误消息的样式，可以在 CSS 文件中设置它。
<ValidatingControlled value={value} errorClassName='error-message' />
这个属性是可选的，默认为 validating-input-error。
结尾
以上就是使用 react-validating-controlled 的详细介绍，其中我们也介绍了如何添加自定义验证函数。这个 npm 包是一个非常有用组件，它可以帮助您在应用程序中更好地发挥优势。
代码示例：react-validating-controlled-demo。
希望这篇文章对你有帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5f51ab1864dac671f1
