Canathus 一个简单的React表单验证工具

写 React 表单可能是一项费力的过程。仅仅为了一个信息,我们通常会有多个包含错误消息和验证信息的状态。这不仅很快让人感到混乱,而且还会创建庞大的 React 文件,没有人知道该去哪里找东西。而且,这样做起来也不够优雅,这点必须要有所考量...

通过 canathus,每个输入数据都处理自己的错误状态和消息。这让你可以专注于重要的功能,并在视觉上简化了 React 文件。在本文中,我们将使用 canathus 构建一个简单的 React 表单,用于收集基本的个人信息。

设置表单

我们首先来设置表单的基本语义。将以下 jsx 复制到你的表单组件中。

javascript 复制代码
function Form() {  
  return (  
    <div className="container">  
      <h1>个人详情</h1>  
      <form>  
        <label htmlFor="nameInput">姓名</label>  
        <input id="nameInput"></input>  
  
        <label htmlFor="emailInput">邮箱</label>  
        <input id="emailInput" type="email"></input>  
  
        <label htmlFor="ageInput">年龄</label>  
        <input id="ageInput" type="number"></input>  
  
        <button>提交</button>  
      </form>  
    </div>  
  );  
}

验证(拜托了)

有了基本设置,我们可以开始对表单进行验证。Canathus 使用验证器,即传递给输入设置的函数,每当你尝试验证该信息时,它们就会运行。

对于这个设置,我们将在一个验证器文件夹中设置我们的验证器。然后我们可以导入这些验证器并用它们来检查通过我们的表单提交的值。

将以下文件添加到 src/validators 文件夹中:

  • nameValidator.js
javascript 复制代码
export const nameValidator = (value) => {  
  if (value.length <= 0)  
    return { valid: false, errorMsg: "这个字段是必填项" };  
  
  return {  
    valid: true,  
    errorMsg: "",  
  };  
};
  • emailValidator.js
javascript 复制代码
export const emailValidator = (value) => {  
  if (value.length <= 0)  
    return { valid: false, errorMsg: "这个字段是必填项" };  
  
  // 检查邮箱格式  
  if (  
    !value.match(  
      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,  
    )  
  )  
    return { valid: false, errorMsg: "请输入有效的邮箱地址" };  
  
  return {  
    valid: true,  
    errorMsg: "",  
  };  
};
  • ageValidator.js
javascript 复制代码
export const ageValidator = (value) => {  
  if (value.length <= 0)  
    return { valid: false, errorMsg: "这个字段是必填项" };  
  
  if (value < 0) return { valid: false, errorMsg: "年龄必须为正数" };  
  
  if (value >= 150) return { valid: false, errorMsg: "年龄必须小于 150" };  
  
  return {  
    valid: true,  
    errorMsg: "",  
  };  
};

随意定制这些验证器以适应你的需要,但现在这些应该足够了。

进入状态

现在我们可以开始为我们的表单设置状态了。首先,我们实际上需要在我们的项目中安装 Canathus:

npm install canathus

安装了 Canathus 后,我们可以使用提供的 useInput 钩子来实例化我们的表单数据。这个钩子接受两个输入,初始值和验证器函数。

javascript 复制代码
import { useInput } from "canathus";  
  
function Form() {  
  const [name, setName] = useInput("", nameValidator);  
  const [email, setEmail] = useInput("", emailValidator);  
  const [age, setAge] = useInput("", ageValidator);  
...

现在让我们将这个状态与我们的 jsx 表单进行关联。我们将使用 Canathus 提供的值来设置错误处理。

javascript 复制代码
import { useInput } from "canathus";  
import { nameValidator } from "./validators/nameValidator.js";  
import { emailValidator } from "./validators/emailValidator.js";  
import { ageValidator } from "./validators/ageValidator.js";  
  
function App() {  
  const [name, setName] = useInput("", nameValidator);  
  const [email, setEmail] = useInput("", emailValidator);  
  const [age, setAge] = useInput("", ageValidator);  
  
  return (  
    <div className="container">  
      <h1>个人详情</h1>  
      <form>  
        <label htmlFor="nameInput">姓名</label>  
        <input  
          id="nameInput"  
          value={name.value}  
          onChange={(e) => setName(e.target.value)}  
        ></input>  
        <span>{name.error && name.errorMsg}</span>  
  
        <label htmlFor="emailInput">邮箱</label>  
        <input  
          id="emailInput"  
          type="email"  
          value={email.value}  
          onChange={(e) => setEmail(e.target.value)}  
        ></input>  
        <span>{email.error && email.errorMsg}</span>  
  
        <label htmlFor="ageInput">年龄</label>  
        <input  
          id="ageInput"  
          type="number"  
          value={age.value}  
          onChange={(e) => setAge(e.target.value)}  
        ></input>  
        <span>{age.error && age.errorMsg}</span>  
  
        <button>提交</button>  
      </form>  
    </div>  
  );  
}  
  
export default App;

提交... 或者别的

现在我们可以创建一个虚拟的提交方法,这在一个完整的应用程序中很可能会被替换为 API 调用。我们可以使用 Canathus 提供的 validate 方法来验证所有的输入数据,并自动更新它们的错误消息。

javascript 复制代码
import { useInput, validate } from "canathus";  
  
...   
  const handleSubmit = (e) => {  
    e.preventDefault();  
    console.log("有效:", validate({ name, email, age }));  
  };  
  
...

添加了这个提交函数后,我们的完整表单组件代码应该如下所示:

javascript 复制代码
import { useInput, validate } from "canathus";  
import { nameValidator } from "./validators/nameValidator.js";  
import { emailValidator } from "./validators/emailValidator.js";  
import { ageValidator } from "./validators/ageValidator.js";  
  
export function Form() {  
  const [name, setName] = useInput("", nameValidator);  
  const [email, setEmail] = useInput("", emailValidator);  
  const [age, setAge] = useInput("", ageValidator);  
  
  const handleSubmit = (e) => {  
    e.preventDefault();  
    console.log("有效:", validate({ name, email, age }));  
  };  
  
  return (  
    <div className="container">  
      <h1>个人详情</h1>  
      <form onSubmit={(e) => handleSubmit(e)}>  
        <label htmlFor="nameInput">姓名</label>  
        <input  
          id="nameInput"  
          value={name.value}  
          onChange={(e) => setName(e.target.value)}  
        ></input>  
        <span>{name.error && name.errorMsg}</span>  
  
        <label htmlFor="emailInput">邮箱</label>  
        <input  
          id="emailInput"  
          type="email"  
          value={email.value}  
          onChange={(e) => setEmail(e.target.value)}  
        ></input>  
        <span>{email.error && email.errorMsg}</span>  
  
        <label htmlFor="ageInput">年龄</label>  
        <input  
          id="ageInput"  
          type="number"  
          value={age.value}  
          onChange={(e) => setAge(e.target.value)}  
        ></input>  
        <span>{age.error && age.errorMsg}</span>  
  
        <button>提交</button>  
      </form>  
    </div>  
  );  
}

总结

本文粗略的介绍了如何验证React表单信息包的使用,简单概括如下:

  1. 首先编写一个验证函数,例如用户名长度、用户邮件、用户年龄限制
  2. 然后再表单组件里面使用 userInput Hook 来接收这些变量
相关推荐
GISer_Jing10 分钟前
React核心功能详解(一)
前端·react.js·前端框架
FØund4043 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
疯狂的沙粒3 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
鑫宝Code4 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
沉默璇年13 小时前
react中useMemo的使用场景
前端·react.js·前端框架
红绿鲤鱼15 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
loey_ln17 小时前
FIber + webWorker
javascript·react.js
zhenryx17 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
老码沉思录21 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
沉默璇年1 天前
react中Fragment的使用场景
前端·react.js·前端框架