Canathus 一个简单的React表单验证工具_react 校验工具-优快云博客

本文展示了如何在React中利用canathus库管理表单状态和验证，通过独立的验证器函数简化错误处理，提升代码可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

设置表单

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

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

export const nameValidator = (value) => {
   
     
  if (value.length <= 0)  
    return {
   
    valid: false, errorMsg: "这个字段是必填项" };  
  
  return {
   
     
    valid: true,  
    errorMsg: "",  
  };  
};

emailValidator.js

export const emailValidator = (value) => {
   
     
  if (value.length <= 0)  
    return {
   
    valid: false, errorMsg: "这个字段是必填项" };  
  
  // 检查邮箱格式  
  if (  
    !value.match(  
      /