目录
  • Situation 背景
  • Target 目标
  • Action 行动
  • Result 结果
  • Review 复盘

Situation 背景

  • 多人开发的老项目里面，很多地方都写了验证手机格式的需求，代码各有千秋、百花齐放
  • 实现：有的写在公共组件库里，有的是单独开发局部组件支持，有的直接手写不复用，有的抽离正则到utils再引入
  • 正则：正则校验也各有千秋，比如/^\d{11}/、/1\d10/、/1[2−9]\d9/、/^1\d{10}/、/^1[2-9]\d{9}/、/1\d10/、/1[2−9]\d9/、/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/等等。
  • 长度限制：有的地方限制maxLength=11，而有的地方没限制
  • 输入格式：有的地方满足334格式(181 2222 3333)手机号码输入, 而有的地方只允许输入纯数字

Target 目标

  • 实现一个易用的手机号码公共组件
  • 使用较为宽松的正则校验并与后端达成一致
  • 不再限制输入长度但会报错提示
  • 支持334的格式输入，并自动去除所有空格
  • 写好参数说明，方便开发使用
  • 尽可能的保持灵活，适用更多场景

Action 行动

import type {

  FormItemProps,

  InputProps,

  RulesProps,

} from '@arco-design/web-react';

import { Form, Input } from '@arco-design/web-react';

import { usePersistCallback } from '@byted/hooks';

import type { ReactNode } from 'react';

import { useMemo } from 'react';

export type VerifyInputProps = {

  /** 


			

	声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。