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 来接收这些变量
相关推荐
September_ning10 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人20 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00121 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
Rattenking2 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫3 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull8 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet19 小时前
那总结下来,react就是落后了
前端·react.js
王解1 天前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语2 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router