字节封装React组件手机号自动校验格式FormItem.docx

第

字节封装React组件手机号自动校验格式FormItem

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

Situation背景

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

Target目标

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

Action行动

importtype{

FormItemProps,

InputProps,

RulesProps,

}from@arco-design/web-react;

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

import{usePersistCallback}from@byted/hooks;

importtype{ReactNode}fromreact;

import{useMemo}fromreact;

exporttypeVerifyInputProps={

/**