使用 formsy-react 禁用 React 中的 HTML5 验证
介绍
表单验证对于网站的安全性和可用性至关重要。验证过程会在提交之前评估输入值的格式是否正确。例如，如果我们有一个电子邮件地址的输入字段，则该值必须包含有效的电子邮件地址；它应该以至少一个字母或数字开头，后跟@符号，然后以域名结尾。
表单验证可以通过使用内置表单验证（使用 HTML5 表单验证功能）或JavaScript来完成。
使用内置表单验证可以利用HTML5 表单控件，它提供了几种无需使用 JavaScript 即可处理验证的方法。
HTML5 验证很简单，只需向任何输入字段添加必需属性，然后浏览器就会接管。
使用内置 HTML5 验证的一个主要缺点是它不可自定义，这在很多方面都会受到限制。这就是为什么我们将探索使用名为React的 JavaScript 库来处理 HTML5 表单验证。
但是 React 只给了我们有限的关于如何处理表单的输入。所以表单验证逻辑由我们自己决定，这也引出了本指南的主题。
在本指南中，我们将研究如何使用formsy-react禁用 HTML5 表单验证。本指南假设您对 React 和 HTML5 有一定程度的熟悉。
什么是 formsy-react？
formsy-react 是 ReactJS 的表单输入构建器和验证器。它允许我们：
构建任何类型的表单元素组件并进行免费验证。
添加验证规则并使用简单的语法。
使用处理程序来处理表单上的不同状态（onError、onSubmit、onValid等）。
将外部错误传递给表单以使元素无效（例如，来自服务器的响应）。
动态地将表单元素添加到我们的表单中，它们将注册/取消注册表单。
使用 formsy-react 进行 HTML5 验证
在我们的应用程序中包含 formsy-react 就像打开我们的终端并输入以下命令一样简单：
npm install formsy-react
使用 formsy-react 进行表单验证需要两个步骤：
构建 Formsy 元素
// MyInput.js
import React from "react";
import { withFormsy } from "formsy-react";
const MyInput = props => {
const handleInputChange = event => {
props.setValue(event.currentTarget.value);
};
return (
<>
<input
onChange={handleInputChange}
type="text"
value={props.value || ""}
required={props.required}
/>
<span>{props.errorMessage}</span>
</>
);
};
export default withFormsy(MyInput);
withFormsy是一个 HOC，它向MyInput组件公开额外的 props 。
您可以在官方文档中查看附加道具。
在我们的应用程序中使用 Formsy 元素
// App.js
import React, { useState } from "react";
import Formsy from "formsy-react";
import MyInput from "./MyInput";
export default function App() {
const [canSubmit, setCanSubmit] = useState(false);
const disableButton = () => {
setCanSubmit(false);
};
const enableButton = () => {
setCanSubmit(true);
};
const submit = data => {
console.log("data", data);
};
return (
<Formsy
onValidSubmit={submit}
onValid={enableButton}
onInvalid={disableButton}
>
<MyInput
name="email"
validations="isEmail"
validationError="This is not a valid email"
required
/>
<button type="submit" disabled={!canSubmit}>
Submit
</button>
</Formsy>
);
}
使用 formsy-react 禁用 HTML5 验证
使用 formsy-react 禁用内置 HTML5 验证非常简单，只需向Formsy组件包装器添加noValidate即可，以避免输入时的默认行为，从而允许 formsy-react 处理和管理所有验证。
// App.js
import React, { useState } from "react";
import Formsy from "formsy-react";
import MyInput from "./MyInput";
export default function App() {
...
return (
<Formsy
onValidSubmit={submit}
onValid={enableButton}
onInvalid={disableButton}
noValidate
>
<MyInput
name="email"
validations="isEmail"
validationError="This is not a valid email"
required
/>
<button type="submit" disabled={!canSubmit}>Submit</button>
</Formsy>
);
}
结论
表单验证是 Web 开发中最困难的任务之一，但我们已经了解了如何利用 formsy-react 使处理表单验证变得更容易。
以下是一些有用的链接，可帮助您了解有关表单验证的更多信息：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~