Skip to content

Commit b4a37bc

Browse files
liweijie0812liweijie0812
authored
feat(form): support string pattern (#821)
1 parent 9d11bc5 commit b4a37bc

File tree

5 files changed

+31
-28
lines changed

5 files changed

+31
-28
lines changed

‎src/common.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,6 @@ export interface UploadDisplayDragEvents {
3838

3939
export type ImageEvent<T = any> = SyntheticEvent<T>;
4040

41-
/**
42-
* 通用全局类型
43-
* */
4441
export type PlainObject = { [key: string]: any };
4542

4643
export type OptionData = {
@@ -60,6 +57,9 @@ export type TreeOptionData<T = string | number> = {
6057
content?: string | TNode;
6158
} & PlainObject;
6259

60+
/**
61+
* 通用全局类型
62+
* */
6363
export type SizeEnum = 'small' | 'medium' | 'large';
6464

6565
export type ShapeEnum = 'circle' | 'round';

‎src/form/form.en-US.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,33 @@
77
name | type | default | description | required
88
-- | -- | -- | -- | --
99
className | String | - | className of component | N
10-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
1111
colon | Boolean | false | \- | N
1212
contentAlign | String | left | options: left/right | N
1313
disabled | Boolean | undefined | \- | N
14-
errorMessage | Object | - | Typescript：`FormErrorMessage` | N
14+
errorMessage | Object | - | Typescript: `FormErrorMessage` | N
1515
id | String | undefined | native id attribute of the form，which supports being used in conjunction with non-form buttons through the form attribute to trigger form events | N
1616
labelAlign | String | right | options: left/right/top | N
1717
labelWidth | String / Number | '81px' | \- | N
1818
preventSubmitDefault | Boolean | true | \- | N
19-
requiredMark | Boolean | undefined | \- | N
19+
requiredMark | Boolean | true | \- | N
2020
requiredMarkPosition | String | left | Display position of required symbols。options: left/right | N
2121
resetType | String | empty | options: empty/initial | N
22-
rules | Object | - | Typescript：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
22+
rules | Object | - | Typescript: `FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
2323
scrollToFirstError | String | - | options: ''/smooth/auto | N
2424
showErrorMessage | Boolean | true | \- | N
2525
submitWithWarningMessage | Boolean | false | \- | N
26-
onReset | Function | | Typescript：`(context: { e?: FormResetEvent }) => void`<br/> | N
27-
onSubmit | Function | | Typescript：`(context: SubmitContext<FormData>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/> | N
28-
onValidate | Function | | Typescript：`(result: ValidateResultContext<FormData>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/> | N
29-
onValuesChange | Function | | Typescript：`(changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void`<br/> | N
26+
onReset | Function | | Typescript: `(context: { e?: FormResetEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
27+
onSubmit | Function | | Typescript: `(context: SubmitContext<FormData>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/> | N
28+
onValidate | Function | | Typescript: `(result: ValidateResultContext<FormData>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/> | N
29+
onValuesChange | Function | | Typescript: `(changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void`<br/> | N
3030

3131
### FormInstanceFunctions 组件实例方法
3232

3333
name | params | return | description
3434
-- | -- | -- | --
3535
className | String | - | className of component | N
36-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
36+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
3737
clearValidate | `(fields?: Array<keyof FormData>)` | \- | required
3838
reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
3939
setValidateMessage | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
@@ -47,40 +47,40 @@ validateOnly | `(params?: Pick<FormValidateParams, 'fields' \| 'trigger'>)` | `P
4747
name | type | default | description | required
4848
-- | -- | -- | -- | --
4949
className | String | - | className of component | N
50-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
50+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
5151
arrow | Boolean | false | \- | N
5252
contentAlign | String | - | options: left/right | N
5353
for | String | - | \- | N
54-
help | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
55-
label | TNode | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
54+
help | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
55+
label | TNode | '' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
5656
labelAlign | String | - | options: left/right/top | N
5757
labelWidth | String / Number | - | \- | N
5858
name | String | - | \- | N
5959
requiredMark | Boolean | undefined | \- | N
60-
rules | Array | - | Typescript：`Array<FormRule>` | N
60+
rules | Array | - | Typescript: `Array<FormRule>` | N
6161
showErrorMessage | Boolean | undefined | \- | N
6262

6363
### FormRule
6464

6565
name | type | default | description | required
6666
-- | -- | -- | -- | --
6767
boolean | Boolean | - | \- | N
68-
date | Boolean / Object | - | Typescript：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
69-
email | Boolean / Object | - | Typescript：`boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
70-
enum | Array | - | Typescript：`Array<string>` | N
68+
date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
69+
email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
70+
enum | Array | - | Typescript: `Array<string>` | N
7171
idcard | Boolean | - | \- | N
7272
len | Number / Boolean | - | \- | N
7373
max | Number / Boolean | - | \- | N
7474
message | String | - | \- | N
7575
min | Number / Boolean | - | \- | N
7676
number | Boolean | - | \- | N
77-
pattern | Object | - | Typescript：`RegExp` | N
77+
pattern | String / Object | - | Typescript: `RegExp \| string` | N
7878
required | Boolean | - | \- | N
7979
telnumber | Boolean | - | \- | N
80-
trigger | String | change | Typescript：`ValidateTriggerType` | N
80+
trigger | String | change | Typescript: `ValidateTriggerType` | N
8181
type | String | error | options: error/warning | N
82-
url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
83-
validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
82+
url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
83+
validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
8484
whitespace | Boolean | - | \- | N
8585

8686
### FormErrorMessage

‎src/form/form.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ id | String | undefined | 表单原生的id属性，支持用于配合非表单
1616
labelAlign | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
1717
labelWidth | String / Number | '81px' | 可以整体设置label标签宽度，默认为81px | N
1818
preventSubmitDefault | Boolean | true | 是否阻止表单提交默认事件（表单提交默认事件会刷新页面），设置为 `true` 可以避免刷新 | N
19-
requiredMark | Boolean | undefined | 是否显示必填符号（*），默认显示 | N
19+
requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N
2020
requiredMarkPosition | String | left | 表单必填符号（*）显示位置。可选项：left/right | N
2121
resetType | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N
2222
rules | Object | - | 表单字段校验规则。TS 类型：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts) | N
2323
scrollToFirstError | String | - | 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动。可选项：''/smooth/auto | N
2424
showErrorMessage | Boolean | true | 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 | N
2525
submitWithWarningMessage | Boolean | false | 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 | N
26-
onReset | Function | | TS 类型：`(context: { e?: FormResetEvent }) => void`<br/>表单重置时触发 | N
26+
onReset | Function | | TS 类型：`(context: { e?: FormResetEvent }) => void`<br/>表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
2727
onSubmit | Function | | TS 类型：`(context: SubmitContext<FormData>) => void`<br/>表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`interface SubmitContext<T extends Data = Data> { e?: FormSubmitEvent; validateResult: FormValidateResult<T>; firstError?: string; fields?: any }`<br/><br/>`type FormValidateResult<T> = boolean \| ValidateResultObj<T>`<br/><br/>`type ValidateResultObj<T> = { [key in keyof T]: boolean \| ValidateResultList }`<br/><br/>`type ValidateResultList = Array<AllValidateResult>`<br/><br/>`type AllValidateResult = CustomValidateObj \| ValidateResultType`<br/><br/>`interface ValidateResultType extends FormRule { result: boolean }`<br/><br/>`type ValidateResult<T> = { [key in keyof T]: boolean \| ErrorList }`<br/><br/>`type ErrorList = Array<FormRule>`<br/> | N
2828
onValidate | Function | | TS 类型：`(result: ValidateResultContext<FormData>) => void`<br/>校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/> | N
2929
onValuesChange | Function | | TS 类型：`(changedValues: Record<string, unknown>, allValues: Record<string, unknown>) => void`<br/>字段值更新时触发的回调事件 | N
@@ -74,7 +74,7 @@ max | Number / Boolean | - | 内置校验方法，校验值最大长度，如：
7474
message | String | - | 校验未通过时呈现的错误信息，值为空则不显示 | N
7575
min | Number / Boolean | - | 内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ min: 10, message: '内容长度不够' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }`。<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
7676
number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1e5 都算数字），示例：`{ number: true, message: '请输入数字' }` | N
77-
pattern | Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp` | N
77+
pattern | String / Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp \| string` | N
7878
required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N
7979
telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N
8080
trigger | String | change | 校验触发方式。TS 类型：`ValidateTriggerType` | N

‎src/form/formModel.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,10 @@ const VALIDATE_MAP = {
8484
enum: (val: ValueType, strs: Array<string>): boolean => strs.includes(val),
8585
idcard: (val: ValueType): boolean => /^(\d{18,18}|\d{15,15}|\d{17,17}x)$/i.test(val),
8686
telnumber: (val: ValueType): boolean => /^1[3-9]\d{9}$/.test(val),
87-
pattern: (val: ValueType, regexp: RegExp): boolean => regexp.test(val),
87+
pattern: (val: ValueType, regexp: RegExp | string): boolean => {
88+
const reg = typeof regexp === 'string' ? new RegExp(regexp) : regexp;
89+
return reg.test(String(val));
90+
},
8891
// 自定义校验规则，可能是异步校验
8992
validator: (val: ValueType, validate: CustomValidator): ReturnType<CustomValidator> => validate(val),
9093
};

‎src/form/type.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ export interface FormRule {
219219
/**
220220
* 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`
221221
*/
222-
pattern?: RegExp;
222+
pattern?: RegExp | string;
223223
/**
224224
* 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记
225225
*/

0 commit comments

Comments
 (0)