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

写 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(  
      /^(([^<>()[\]\\.,;:\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

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 钩子来实例化我们的表单数据。这个钩子接受两个输入，初始值和验证器函数。

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

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

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 方法来验证所有的输入数据，并自动更新它们的错误消息。

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

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

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 来接收这些变量