Canathus 一个简单的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(  
      /
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值