表单工具 | skyroc-admin

概述

项目提供了表单校验规则的快捷工具，基于 Ant Design Form 封装常用的校验规则。

useFormRules

核心功能

提供常用的表单校验规则：

用户名校验
密码校验
手机号校验
邮箱校验
验证码校验
确认密码校验

代码位置: src/features/form/form.ts

基础使用


import { useFormRules } from '@/features/form';
 
function LoginForm() {
  const { formRules } = useFormRules();
  const [form] = Form.useForm();
 
  return (
    <Form form={form}>
      <Form.Item name="userName" rules={formRules.userName}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={formRules.pwd}>
        <Input.Password placeholder="密码" />
      </Form.Item>
    </Form>
  );
}

预设规则

formRules

包含必填 + 格式校验的完整规则：


const { formRules } = useFormRules();
 
// 可用规则
formRules.userName   // 用户名（必填 + 格式）
formRules.pwd        // 密码（必填 + 格式）
formRules.phone      // 手机号（必填 + 格式）
formRules.email      // 邮箱（必填 + 格式）
formRules.code       // 验证码（必填 + 格式）

patternRules

只包含格式校验，不包含必填：


const { patternRules } = useFormRules();
 
// 可用规则
patternRules.userName
patternRules.pwd
patternRules.phone
patternRules.email
patternRules.code

自定义规则

createRequiredRule

创建必填规则：


const { createRequiredRule } = useFormRules();
 
<Form.Item
  name="name"
  rules={[createRequiredRule('请输入姓名')]}
>
  <Input />
</Form.Item>

createConfirmPwdRule

创建确认密码规则：


const { createConfirmPwdRule } = useFormRules();
const [form] = Form.useForm();
 
<Form form={form}>
  <Form.Item name="password" rules={formRules.pwd}>
    <Input.Password placeholder="密码" />
  </Form.Item>
  <Form.Item name="confirmPwd" rules={createConfirmPwdRule(form)}>
    <Input.Password placeholder="确认密码" />
  </Form.Item>
</Form>

defaultRequiredRule

默认必填规则：


const { defaultRequiredRule } = useFormRules();
 
<Form.Item name="field" rules={[defaultRequiredRule]}>
  <Input />
</Form.Item>

正则表达式

项目预定义的正则表达式常量：

代码位置: src/constants/reg.ts


// 用户名：字母开头，允许字母数字下划线
REG_USER_NAME = /^[a-zA-Z][\w]{3,15}$/
 
// 密码：6-18位，包含字母、数字、特殊字符
REG_PWD = /^[\w!@#$%^&*]{6,18}$/
 
// 手机号：11位数字
REG_PHONE = /^1[3-9]\d{9}$/
 
// 邮箱
REG_EMAIL = /^[\w.-]+@[a-zA-Z\d.-]+\.[a-zA-Z]{2,}$/
 
// 6位验证码
REG_CODE_SIX = /^\d{6}$/

表单场景

登录表单


import { useFormRules } from '@/features/form';
 
function LoginForm() {
  const { formRules } = useFormRules();
  const [form] = Form.useForm();
 
  const handleSubmit = async (values) => {
    // 提交逻辑
  };
 
  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item name="userName" rules={formRules.userName}>
        <Input prefix={<UserOutlined />} placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password" rules={formRules.pwd}>
        <Input.Password prefix={<LockOutlined />} placeholder="密码" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        登录
      </Button>
    </Form>
  );
}

注册表单


function RegisterForm() {
  const { formRules, createConfirmPwdRule } = useFormRules();
  const [form] = Form.useForm();
 
  return (
    <Form form={form}>
      <Form.Item name="userName" rules={formRules.userName}>
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="phone" rules={formRules.phone}>
        <Input placeholder="手机号" />
      </Form.Item>
      <Form.Item name="email" rules={formRules.email}>
        <Input placeholder="邮箱" />
      </Form.Item>
      <Form.Item name="password" rules={formRules.pwd}>
        <Input.Password placeholder="密码" />
      </Form.Item>
      <Form.Item name="confirmPwd" rules={createConfirmPwdRule(form)}>
        <Input.Password placeholder="确认密码" />
      </Form.Item>
      <Form.Item name="code" rules={formRules.code}>
        <Input placeholder="验证码" />
      </Form.Item>
    </Form>
  );
}

自定义校验


function CustomForm() {
  const { createRequiredRule, patternRules } = useFormRules();
 
  // 自定义异步校验
  const validateAge = async (_, value) => {
    if (value < 18) {
      throw new Error('年龄必须大于18岁');
    }
  };
 
  return (
    <Form>
      <Form.Item
        name="username"
        rules={[
          createRequiredRule('请输入用户名'),
          patternRules.userName
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="age"
        rules={[
          createRequiredRule('请输入年龄'),
          { validator: validateAge }
        ]}
      >
        <InputNumber />
      </Form.Item>
    </Form>
  );
}

国际化支持

表单规则的错误提示支持国际化：


// src/locales/langs/zh-cn.ts
export default {
  form: {
    required: '不能为空',
    userName: {
      required: '请输入用户名',
      invalid: '用户名格式不正确'
    },
    pwd: {
      required: '请输入密码',
      invalid: '密码格式不正确'
    },
    phone: {
      required: '请输入手机号',
      invalid: '手机号格式不正确'
    },
    email: {
      required: '请输入邮箱',
      invalid: '邮箱格式不正确'
    },
    code: {
      required: '请输入验证码',
      invalid: '验证码格式不正确'
    },
    confirmPwd: {
      required: '请再次输入密码',
      invalid: '两次输入的密码不一致'
    }
  }
};

最佳实践

使用预设规则 - 优先使用 formRules，避免重复定义
必填提示 - 使用 createRequiredRule 自定义必填提示
组合规则 - 结合 patternRules 和自定义校验
国际化 - 错误提示统一使用国际化 key
表单实例 - 确认密码等场景需要传入 form 实例