lingxiao/mini-yu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
lingxiao865
2026-02-10 08:05:03 +08:00
commit c5af079d8c
1094 changed files with 97530 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
uni_modules/tdesign-uniapp/components/form/README.en-US.md Normal file
View File

@@ -0,0 +1,137 @@
---
title: Form
description: Form consists of input, radio, select, checkbox and so on. With form, you can collect, verify and submit data.
spline: base
isComponent: true
toc: false
---
### 01 Component Type
Base form
{{ horizontal }}
{{ vertical }}
## API
### Form Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
colon | Boolean | false | \- | N
content-align | String | left | options: left/right | N
data | Object | {} | Typescript: `FormData` | N
disabled | Boolean | undefined | \- | N
error-message | Object | - | Typescript: `FormErrorMessage` | N
label-align | String | right | options: left/right/top | N
label-width | String / Number | '81px' | \- | N
readonly | Boolean | undefined | \- | N
required-mark | Boolean | undefined | \- | N
required-mark-position | String | - | Display position of required symbols。options: left/right | N
reset-type | String | empty | options: empty/initial | N
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-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
scroll-to-first-error | String | - | options: ''/smooth/auto | N
show-error-message | Boolean | true | \- | N
submit-with-warning-message | Boolean | false | \- | N
### Form Events
name | params | description
-- | -- | --
reset | `(context: { e?: FormResetEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/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/>
validate | `(result: ValidateResultContext<FormData>)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
### FormInstanceFunctions 组件实例方法
name | params | return | description
-- | -- | -- | --
clear-validate | `(fields?: Array<keyof FormData>)` | \- | required
reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
submit | `(params?: { showErrorMessage?: boolean })` | \- | required
validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
### FormItem Props
name | type | default | description | required
-- | -- | -- | -- | --
custom-style | Object | - | CSS(Cascading Style Sheets) | N
arrow | Boolean | false | \- | N
content-align | String | - | options: left/right | N
for | String | - | \- | N
help | String | - | \- | N
label | String | '' | \- | N
label-align | String | - | options: left/right/top | N
label-width | String / Number | - | \- | N
name | String | - | \- | N
required-mark | Boolean | undefined | \- | N
rules | Array | - | Typescript: `Array<FormRule>` | N
show-error-message | Boolean | undefined | \- | N
### FormItem Slots
name | Description
-- | --
help | \-
label | \-
### FormRule
name | type | default | description | required
-- | -- | -- | -- | --
boolean | Boolean | - | \- | N
date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
enum | Array | - | Typescript: `Array<string>` | N
idcard | Boolean | - | \- | N
len | Number / Boolean | - | \- | N
max | Number / Boolean | - | \- | N
message | String | - | \- | N
min | Number / Boolean | - | \- | N
number | Boolean | - | \- | N
pattern | String / Object | - | Typescript: `RegExp \| string` | N
required | Boolean | - | \- | N
telnumber | Boolean | - | \- | N
trigger | String | change | Typescript: `ValidateTriggerType` | N
type | String | error | options: error/warning | N
url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
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-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
whitespace | Boolean | - | \- | N
### FormErrorMessage
name | type | default | description | required
-- | -- | -- | -- | --
boolean | String | - | \- | N
date | String | - | \- | N
enum | String | - | \- | N
idcard | String | - | \- | N
len | String | - | \- | N
max | String | - | \- | N
min | String | - | \- | N
number | String | - | \- | N
pattern | String | - | \- | N
required | String | - | \- | N
telnumber | String | - | \- | N
url | String | - | \- | N
validator | String | - | \- | N
whitespace | String | - | \- | N
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-form-bg-color | @bg-color-container | -
--td-form-border-radius | 0 | -
--td-form-padding | 0 | -
--td-form-readonly-bg-color | @bg-color-secondarycontainer | -
--td-form-item-horizontal-padding | 32rpx | -
--td-form-item-justify-content | space-between | -
--td-form-item-label-width | 160rpx | -
--td-form-item-vertical-padding | 32rpx | -

146
uni_modules/tdesign-uniapp/components/form/README.md Normal file
View File

@@ -0,0 +1,146 @@
---
title: Form 表单
description: 用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。
spline: base
isComponent: true
toc: false
---
## 引入
可在 `main.ts` 或在需要使用的页面或组件中引入。
```js
import TForm from '@tdesign/uniapp/form/form.vue';
import TFormItem from '@tdesign/uniapp/form-item/form-item.vue';
```
### 01 组件类型
基础表单
{{ horizontal }}
{{ vertical }}
## API
### Form Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N
content-align | String | left | 表单内容对齐方式：左对齐、右对齐。可选项：left/right | N
data | Object | {} | 表单数据。TS 类型：`FormData` | N
disabled | Boolean | undefined | 是否禁用整个表单 | N
error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N
label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N
label-width | String / Number | '81px' | 可以整体设置label标签宽度，默认为81px | N
readonly | Boolean | undefined | 是否整个表单只读 | N
required-mark | Boolean | undefined | 是否显示必填符号（*），默认显示 | N
required-mark-position | String | - | 表单必填符号（*）显示位置。可选项：left/right | N
reset-type | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N
rules | Object | - | 表单字段校验规则。TS 类型：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
scroll-to-first-error | String | - | 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动。可选项：''/smooth/auto | N
show-error-message | Boolean | true | 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 | N
submit-with-warning-message | Boolean | false | 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 | N
### Form Events
名称 | 参数 | 描述
-- | -- | --
reset | `(context: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
submit | `(context: SubmitContext<FormData>)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/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/>
validate | `(result: ValidateResultContext<FormData>)` | 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>`<br/>
### FormInstanceFunctions 组件实例方法
名称 | 参数 | 返回值 | 描述
-- | -- | -- | --
clear-validate | `(fields?: Array<keyof FormData>)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
reset | `(params?: FormResetParams<FormData>)` | \- | 必需。重置表单，表单里面没有重置按钮`<button type=\"reset\" />`时可以使用该方法，默认重置全部字段为空，该方法会触发 `reset` 事件。<br />如果表单属性 `resetType='empty'` 或者 `reset.type='empty'` 会重置为空；<br />如果表单属性 `resetType='initial'` 或者 `reset.type='initial'` 会重置为表单初始值。<br />`reset.fields` 用于设置具体重置哪些字段，示例：`reset({ type: 'initial', fields: ['name', 'age'] })`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormResetParams<FormData> { type?: 'initial' \| 'empty'; fields?: Array<keyof FormData> }`<br/>
set-validate-message | `(message: FormValidateMessage<FormData>)` | \- | 必需。设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] }`<br/><br/>`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`<br/>
submit | `(params?: { showErrorMessage?: boolean })` | \- | 必需。提交表单，表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因，默认显示。该方法会触发 `submit` 事件
validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>>` | 必需。校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts)。<br/>`interface FormValidateParams { fields?: Array<string>; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`<br/><br/>`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`<br/>
### FormItem Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
custom-style | Object | - | 自定义样式 | N
arrow | Boolean | false | 是否显示右侧箭头 | N
content-align | String | - | 表单内容对齐方式，优先级高于 Form.contentAlign。可选项：left/right | N
for | String | - | label 原生属性 | N
help | String | - | 表单项说明内容 | N
label | String | '' | 字段标签名称 | N
label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N
label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N
name | String | - | 表单字段名称 | N
required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N
rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule>` | N
show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
### FormItem Slots
名称 | 描述
-- | --
help | 自定义 `help` 显示内容
label | 自定义 `label` 显示内容
### FormRule
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
boolean | Boolean | - | 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }` | N
date | Boolean / Object | - | 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`。TS 类型：`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
email | Boolean / Object | - | 内置校验方法，校验值是否为邮件格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }`。TS 类型：`boolean \| IsEmailOptions` `import type { IsEmailOptions } from '../common/common'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
enum | Array | - | 内置校验方法，校验值是否属于枚举值中的值。示例：`{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }`。TS 类型：`Array<string>` | N
idcard | Boolean | - | 内置校验方法，校验值是否为身份证号码，组件校验正则为 `/^(\\d{18,18}\|\\d{15,15}\|\\d{17,17}x)$/i`，示例：`{ idcard: true, message: '请输入正确的身份证号码' }` | N
len | Number / Boolean | - | 内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：`{ len: 10, message: '内容长度不对' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }` | N
max | Number / Boolean | - | 内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ max: 10, message: '内容超出' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }`<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
message | String | - | 校验未通过时呈现的错误信息，值为空则不显示 | N
min | Number / Boolean | - | 内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ min: 10, message: '内容长度不够' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }`。<br />如果数据类型数字（Number），则自动变为数字大小的比对 | N
number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1e5 都算数字），示例：`{ number: true, message: '请输入数字' }` | N
pattern | String / Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp \| string` | N
required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N
telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N
trigger | String | change | 校验触发方式。TS 类型：`ValidateTriggerType` | N
type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N
url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import type { IsURLOptions } from '../common/common'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
validator | Function | - | 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`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`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/form/type.ts) | N
whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }` | N
### FormErrorMessage
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
boolean | String | - | 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'` | N
date | String | - | 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
enum | String | - | 枚举值校验规则不通过时的表单项显示文案，全局配置默认是：`${name}只能是${validate}等` | N
idcard | String | - | 身份证号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
len | String | - | 值长度校验不通过时的表单项显示文案，全局配置默认是：`'${name}字符长度必须是 ${validate}'` | N
max | String | - | 值的长度太长或值本身太大时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符'` | N
min | String | - | 值的长度太短或值本身太小时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符'` | N
number | String | - | 数字类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}必须是数字'` | N
pattern | String | - | 正则表达式校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
required | String | - | 没有填写必填项时的表单项显示文案，全局配置默认是：`'${name}必填'` | N
telnumber | String | - | 手机号号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
url | String | - | 链接校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'` | N
validator | String | - | 自定义校验规则校验不通过时的表单项显示文案，全局配置默认是：'${name}不符合要求' | N
whitespace | String | - | 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空` | N
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-form-bg-color | @bg-color-container | -
--td-form-border-radius | 0 | -
--td-form-padding | 0 | -
--td-form-readonly-bg-color | @bg-color-secondarycontainer | -
--td-form-item-horizontal-padding | 32rpx | -
--td-form-item-justify-content | space-between | -
--td-form-item-label-width | 160rpx | -
--td-form-item-vertical-padding | 32rpx | -

56
uni_modules/tdesign-uniapp/components/form/form-item-props.ts Normal file
View File

@@ -0,0 +1,56 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdFormItemProps } from '../form/type';
export default {
/** 是否显示右侧箭头 */
arrow: Boolean,
/** label 原生属性 */
for: {
type: String,
default: '',
},
/** 表单项说明内容 */
help: {
type: String,
},
/** 字段标签名称 */
label: {
type: String,
default: '' as TdFormItemProps['label'],
},
/** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign */
labelAlign: {
type: String,
validator(val: TdFormItemProps['labelAlign']): boolean {
if (!val) return true;
return ['left', 'right', 'top'].includes(val);
},
},
/** 可以整体设置标签宽度，优先级高于 Form.labelWidth */
labelWidth: {
type: [String, Number],
},
/** 表单字段名称 */
name: {
type: String,
default: '',
},
/** 是否显示必填符号（*），优先级高于 Form.requiredMark */
requiredMark: {
type: Boolean,
default: undefined,
},
/** 表单字段校验规则 */
rules: {
type: Array,
},
/** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */
showErrorMessage: {
type: Boolean,
default: undefined,
},
};

169
uni_modules/tdesign-uniapp/components/form/form.css Normal file
View File

@@ -0,0 +1,169 @@
.t-form {
position: relative;
width: 100%;
background-color: var(--td-form-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
padding: var(--td-form-padding, 0);
border-radius: var(--td-form-border-radius, 0);
box-sizing: border-box;
min-height: 100%;
}
.t-form--label-left .t-form__item .t-form__label {
text-align: left;
justify-content: flex-start;
}
.t-form--label-right .t-form__item .t-form__label {
text-align: right;
justify-content: flex-end;
}
.t-form--label-top .t-form__item {
flex-direction: column;
align-items: flex-start;
}
.t-form--label-top .t-form__item .t-form__label {
width: 100%;
margin-bottom: var(--td-spacer, 16rpx);
text-align: left;
justify-content: flex-start;
}
.t-form--label-top .t-form__item .t-form__controls {
width: 100%;
margin-top: 0;
}
.t-form--disabled {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
.t-form--disabled .t-form__item .t-form__label,
.t-form--disabled .t-form__item .t-form__controls,
.t-form--disabled .t-form__item .t-form__help,
.t-form--disabled .t-form__item .t-form__extra {
color: var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
}
.t-form--readonly {
background-color: var(--td-form-readonly-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-form--readonly .t-form__item .t-form__label,
.t-form--readonly .t-form__item .t-form__controls,
.t-form--readonly .t-form__item .t-form__help,
.t-form--readonly .t-form__item .t-form__extra {
color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
}
.t-form__item {
position: relative;
display: flex;
align-items: flex-start;
width: 100%;
margin-bottom: var(--td-spacer-2, 32rpx);
}
.t-form__item:last-child {
margin-bottom: 0;
}
.t-form__label {
position: relative;
display: flex;
align-items: center;
min-width: 160rpx;
max-width: 300rpx;
margin-right: var(--td-spacer-2, 32rpx);
font-size: var(--td-font-size-m, 32rpx);
color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
line-height: 1.5;
word-break: break-all;
box-sizing: border-box;
}
.t-form__label--required::before {
content: '*';
color: var(--td-error-color, var(--td-error-color-6, #d54941));
margin-right: 4rpx;
font-size: var(--td-font-size-m, 32rpx);
line-height: 1;
}
.t-form__label--colon::after {
content: ':';
margin-left: 4rpx;
color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
}
.t-form__label--required-mark-left::before {
content: '*';
color: var(--td-error-color, var(--td-error-color-6, #d54941));
margin-right: 4rpx;
font-size: var(--td-font-size-m, 32rpx);
line-height: 1;
}
.t-form__label--required-mark-right::after {
content: '*';
color: var(--td-error-color, var(--td-error-color-6, #d54941));
margin-left: 4rpx;
font-size: var(--td-font-size-m, 32rpx);
line-height: 1;
}
.t-form__controls {
flex: 1;
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
}
.t-form__help {
margin-top: var(--td-spacer, 16rpx);
font-size: var(--td-font-size-s, 24rpx);
color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
line-height: 1.4;
}
.t-form__extra {
margin-left: var(--td-spacer-2, 32rpx);
font-size: var(--td-font-size-s, 24rpx);
color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
line-height: 1.4;
}
.t-form--error .t-form__label {
color: var(--td-error-color, var(--td-error-color-6, #d54941));
}
.t-form--error .t-form__help {
color: var(--td-error-color, var(--td-error-color-6, #d54941));
}
.t-form--success .t-form__label {
color: var(--td-success-color, var(--td-success-color-5, #2ba471));
}
.t-form--success .t-form__help {
color: var(--td-success-color, var(--td-success-color-5, #2ba471));
}
.t-form--warning .t-form__label {
color: var(--td-warning-color, var(--td-warning-color-5, #e37318));
}
.t-form--warning .t-form__help {
color: var(--td-warning-color, var(--td-warning-color-5, #e37318));
}
@media (max-width: 750rpx) {
.t-form__label {
min-width: 120rpx;
max-width: 200rpx;
font-size: var(--td-font-size-base, 28rpx);
}
.t-form__item {
margin-bottom: var(--td-spacer, 16rpx);
}
}
.t-form--compact .t-form__item {
margin-bottom: var(--td-spacer, 16rpx);
}
.t-form--compact .t-form__label {
min-width: 120rpx;
font-size: var(--td-font-size-base, 28rpx);
}
.t-form--compact .t-form__help {
margin-top: calc(var(--td-spacer, 16rpx) / 2);
font-size: var(--td-font-size-xs, var(--td-font-size, 20rpx));
}
.t-form--loose .t-form__item {
margin-bottom: var(--td-spacer-3, 48rpx);
}
.t-form--loose .t-form__label {
min-width: 200rpx;
font-size: var(--td-font-size-l, 36rpx);
}
.t-form--loose .t-form__help {
margin-top: var(--td-spacer-2, 32rpx);
font-size: var(--td-font-size-m, 32rpx);
}

287
uni_modules/tdesign-uniapp/components/form/form.vue Normal file
View File

@@ -0,0 +1,287 @@
<template>
<view>
<form
:class="
classPrefix +
' ' + classPrefix + '--' + labelAlign +
' ' + classPrefix + '--' + (disabled ? 'disabled' : '') +
' ' + classPrefix + '--' + (readonly ? 'readonly' : '') +
' ' + tClass
"
:style="customStyle"
>
<slot />
</form>
</view>
</template>
<script>
import { uniComponent } from '../common/src/index';
import { prefix } from '../common/config';
import props from './props';
import { ParentMixin, RELATION_MAP } from '../common/relation';
import { coalesce } from '../common/utils';
const name = `${prefix}-form`;
const needValidate = (name, fields) => {
if (!fields || !Array.isArray(fields)) return true;
return fields.indexOf(`${name}`) !== -1;
};
export default uniComponent({
name,
options: {
styleIsolation: 'shared',
},
externalClasses: [
`${prefix}-class`,
],
mixins: [ParentMixin(RELATION_MAP.FormItem)],
props: {
...props,
},
data() {
return {
prefix,
classPrefix: name,
children: [],
formData: {},
initialData: {},
fields: [],
};
},
created() {
this.initFormData();
},
methods: {
// 初始化表单数据
initFormData() {
const { data } = this;
// 确保 data 不为 undefined 或 null
const safeData = data || {};
const formData = { ...safeData };
const initialData = { ...safeData };
const fields = Object.keys(safeData);
this.formData = formData;
this.initialData = initialData;
this.fields = fields;
},
// 注册子组件
registerChild(child) {
const { children } = this;
if (!children.find(item => item.name === child.name)) {
children.push(child);
this.children = children;
}
},
// 注销子组件
unregisterChild(childName) {
const { children } = this;
const index = children.findIndex(item => item.name === childName);
if (index > -1) {
children.splice(index, 1);
this.children = children;
}
},
// 更新表单数据
updateFormData(name, value) {
const { formData } = this;
formData[name] = value;
this.formData = formData;
},
// 验证表单
async validate(params = {}) {
const { fields, trigger = 'all' } = params;
const showErrorMessage = coalesce(params.showErrorMessage, this.showErrorMessage);
const { children } = this;
const { data } = this;
const validatePromises = children
.filter(child => needValidate(`${child.name}`, fields))
.map(child => child.validate(data, trigger, showErrorMessage));
try {
const results = await Promise.all(validatePromises);
const validateResult = this.formatValidateResult(results);
this.$emit('validate', {
validateResult,
});
return validateResult;
} catch (error) {
return false;
}
},
// 纯净验证（不显示错误信息）
async validateOnly(params) {
const { fields, trigger = 'all' } = params;
const { children } = this;
const validatePromises = children
.filter((child) => {
if (fields && fields.length > 0) {
return fields.includes(child.name);
}
return true;
})
.map(child => child.validateOnly(trigger));
try {
const results = await Promise.all(validatePromises);
return this.formatValidateResult(results);
} catch (error) {
return false;
}
},
// 格式化验证结果
formatValidateResult(validateResultList) {
const result = {};
let hasError = false;
validateResultList.forEach((item) => {
if (item && typeof item === 'object') {
Object.keys(item).forEach((key) => {
if (item[key] !== true) {
result[key] = item[key];
hasError = true;
}
});
}
});
return hasError ? result : true;
},
// 获取第一个错误信息
getFirstError(validateResult) {
if (validateResult === true) return '';
const firstKey = Object.keys(validateResult)[0];
if (!firstKey) return '';
const errorList = validateResult[firstKey];
if (Array.isArray(errorList) && errorList.length > 0) {
return errorList[0].message || '';
}
return '';
},
// 提交表单
async submit(options) {
try {
const validateResult = await this.validate({
showErrorMessage: coalesce(options?.showErrorMessage, this.showErrorMessage),
});
const firstError = this.getFirstError(validateResult);
this.$emit('submit', {
validateResult,
firstError,
});
return validateResult;
} catch (error) {
return false;
}
},
// 获取表单提交信息
async getValidate() {
try {
const validateResult = await this.validate();
const firstError = this.getFirstError(validateResult);
// this.$emit('getFormData', {
// validateResult,
// firstError,
// });
return { validateResult, firstError };
} catch (error) {
return false;
}
},
// 重置表单
reset(params = {}) {
const { fields } = params;
const resetType = coalesce(params.resetType, this.resetType);
const { children, initialData, formData } = this;
children
.filter(child => needValidate(`${child.name}`, fields))
.forEach((child) => {
if (resetType === 'empty') {
this.updateFormData(child.name, this.getEmptyValue(child.name));
} else if (resetType === 'initial') {
this.updateFormData(child.name, initialData[child.name]);
}
child.resetField();
});
this.$emit('reset', {
formData,
});
},
// 清空验证结果
clearValidate(fields) {
const { children } = this;
children.forEach((child) => {
if (!fields || fields.includes(child.name)) {
child.clearValidate();
}
});
},
// 设置验证信息
setValidateMessage(validateMessage) {
const { children } = this;
children.forEach((child) => {
if (validateMessage[child.name]) {
child.setValidateMessage(validateMessage[child.name]);
}
});
},
// 获取空值
getEmptyValue(name) {
const { formData } = this;
const currentValue = formData[name];
if (Array.isArray(currentValue)) {
return [];
}
if (typeof currentValue === 'object' && currentValue !== null) {
return {};
}
if (typeof currentValue === 'number') {
return 0;
}
return '';
},
// 表单提交事件处理
onSubmit() {
this.submit();
},
// 表单重置事件处理
onReset() {
this.reset();
},
},
});
</script>
<style scoped>
@import './form.css';
</style>

109
uni_modules/tdesign-uniapp/components/form/props.ts Normal file
View File

@@ -0,0 +1,109 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { TdFormProps } from './type';
export default {
/** 是否在表单标签字段右侧显示冒号 */
colon: Boolean,
/** 表单内容对齐方式：左对齐、右对齐 */
contentAlign: {
type: String,
default: 'left' as TdFormProps['contentAlign'],
validator(val: TdFormProps['contentAlign']): boolean {
if (!val) return true;
return ['left', 'right'].includes(val);
},
},
/** 表单数据 */
data: {
type: Object,
default: () => ({}),
},
/** 是否禁用整个表单 */
disabled: {
type: Boolean,
default: undefined,
},
/** 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }` */
errorMessage: {
type: Object,
},
/** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐 */
labelAlign: {
type: String,
default: 'right' as TdFormProps['labelAlign'],
validator(val: TdFormProps['labelAlign']): boolean {
if (!val) return true;
return ['left', 'right', 'top'].includes(val);
},
},
/** 可以整体设置label标签宽度，默认为81px */
labelWidth: {
type: [String, Number],
default: '81px' as TdFormProps['labelWidth'],
},
/** 是否整个表单只读 */
readonly: {
type: Boolean,
default: undefined,
},
/** 是否显示必填符号（*），默认显示 */
requiredMark: {
type: Boolean,
default: undefined,
},
/** 表单必填符号（*）显示位置 */
requiredMarkPosition: {
type: String,
validator(val: TdFormProps['requiredMarkPosition']): boolean {
if (!val) return true;
return ['left', 'right'].includes(val);
},
},
/** 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值 */
resetType: {
type: String,
default: 'empty' as TdFormProps['resetType'],
validator(val: TdFormProps['resetType']): boolean {
if (!val) return true;
return ['empty', 'initial'].includes(val);
},
},
/** 表单字段校验规则 */
rules: {
type: Object,
},
/** 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动 */
scrollToFirstError: {
type: String,
validator(val: TdFormProps['scrollToFirstError']): boolean {
if (!val) return true;
return ['', 'smooth', 'auto'].includes(val);
},
},
/** 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 */
showErrorMessage: {
type: Boolean,
default: true,
},
/** 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 */
submitWithWarningMessage: Boolean,
/** 表单重置时触发 */
onReset: {
type: Function,
default: () => ({}),
},
/** 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()` */
onSubmit: {
type: Function,
default: () => ({}),
},
/** 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表 */
onValidate: {
type: Function,
default: () => ({}),
},
};

387
uni_modules/tdesign-uniapp/components/form/type.ts Normal file
View File

@@ -0,0 +1,387 @@
/* eslint-disable */
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* */
import type { IsEmailOptions } from '../common/common';
import type { IsURLOptions } from '../common/common';
import type { FormResetEvent, FormSubmitEvent } from '../common/common';
export interface TdFormProps<FormData extends Data = Data> {
/**
* 是否在表单标签字段右侧显示冒号
* @default false
*/
colon?: boolean;
/**
* 表单内容对齐方式：左对齐、右对齐
* @default left
*/
contentAlign?: 'left' | 'right';
/**
* 表单数据
* @default {}
*/
data?: FormData;
/**
* 是否禁用整个表单
*/
disabled?: boolean;
/**
* 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`
*/
errorMessage?: FormErrorMessage;
/**
* 表单字段标签对齐方式：左对齐、右对齐、顶部对齐
* @default right
*/
labelAlign?: 'left' | 'right' | 'top';
/**
* 可以整体设置label标签宽度，默认为81px
* @default '81px'
*/
labelWidth?: string | number;
/**
* 是否整个表单只读
*/
readonly?: boolean;
/**
* 是否显示必填符号（*），默认显示
*/
requiredMark?: boolean;
/**
* 表单必填符号（*）显示位置
*/
requiredMarkPosition?: 'left' | 'right';
/**
* 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值
* @default empty
*/
resetType?: 'empty' | 'initial';
/**
* 表单字段校验规则
*/
rules?: FormRules<FormData>;
/**
* 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动
*/
scrollToFirstError?: '' | 'smooth' | 'auto';
/**
* 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性
* @default true
*/
showErrorMessage?: boolean;
/**
* 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件
* @default false
*/
submitWithWarningMessage?: boolean;
/**
* 表单重置时触发
*/
onReset?: (context: { e?: FormResetEvent }) => void;
/**
* 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。<br />【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`
*/
onSubmit?: (context: SubmitContext<FormData>) => void;
/**
* 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表
*/
onValidate?: (result: ValidateResultContext<FormData>) => void;
}
/** 组件实例方法 */
export interface FormInstanceFunctions<FormData extends Data = Data> {
/**
* 清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])`
*/
clearValidate: (fields?: Array<keyof FormData>) => void;
/**
* 重置表单，表单里面没有重置按钮`<button type=\"reset\" />`时可以使用该方法，默认重置全部字段为空，该方法会触发 `reset` 事件。<br />如果表单属性 `resetType='empty'` 或者 `reset.type='empty'` 会重置为空；<br />如果表单属性 `resetType='initial'` 或者 `reset.type='initial'` 会重置为表单初始值。<br />`reset.fields` 用于设置具体重置哪些字段，示例：`reset({ type: 'initial', fields: ['name', 'age'] })`
*/
reset: (params?: FormResetParams<FormData>) => void;
/**
* 设置自定义校验结果，如远程校验信息直接呈现。注意需要在组件挂载结束后使用该方法。`FormData` 指表单数据泛型
*/
setValidateMessage: (message: FormValidateMessage<FormData>) => void;
/**
* 提交表单，表单里面没有提交按钮`<button type=\"submit\" />`时可以使用该方法。`showErrorMessage` 表示是否在提交校验不通过时显示校验不通过的原因，默认显示。该方法会触发 `submit` 事件
*/
submit: (params?: { showErrorMessage?: boolean }) => void;
/**
* 校验函数，包含错误文本提示等功能。泛型 `FormData` 表示表单数据 TS 类型。<br/>【关于参数】`params.fields` 表示校验字段，如果设置了 `fields`，本次校验将仅对这些字段进行校验。`params.trigger` 表示本次触发校验的范围，'params.trigger = blur' 表示只触发校验规则设定为 trigger='blur' 的字段，'params.trigger = change' 表示只触发校验规则设定为 trigger='change' 的字段，默认触发全范围校验。`params.showErrorMessage` 表示校验结束后是否显示错误文本提示，默认显示。<br />【关于返回值】返回值为 true 表示校验通过；如果校验不通过，返回值为校验结果列表
*/
validate: (params?: FormValidateParams) => Promise<FormValidateResult<FormData>>;
}
export interface TdFormItemProps {
/**
* 是否显示右侧箭头
* @default false
*/
arrow?: boolean;
/**
* 表单内容对齐方式，优先级高于 Form.contentAlign
*/
contentAlign?: 'left' | 'right';
/**
* label 原生属性
* @default ''
*/
for?: string;
/**
* 表单项说明内容
*/
help?: string;
/**
* 字段标签名称
* @default ''
*/
label?: string;
/**
* 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign
*/
labelAlign?: 'left' | 'right' | 'top';
/**
* 可以整体设置标签宽度，优先级高于 Form.labelWidth
*/
labelWidth?: string | number;
/**
* 表单字段名称
* @default ''
*/
name?: string;
/**
* 是否显示必填符号（*），优先级高于 Form.requiredMark
*/
requiredMark?: boolean;
/**
* 表单字段校验规则
*/
rules?: Array<FormRule>;
/**
* 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage`
*/
showErrorMessage?: boolean;
}
export interface FormRule {
/**
* 内置校验方法，校验值类型是否为布尔类型，示例：`{ boolean: true, message: '数据类型必须是布尔类型' }`
*/
boolean?: boolean;
/**
* 内置校验方法，校验值是否为日期格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }`
*/
date?: boolean | IsDateOptions;
/**
* 内置校验方法，校验值是否为邮件格式，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }`
*/
email?: boolean | IsEmailOptions;
/**
* 内置校验方法，校验值是否属于枚举值中的值。示例：`{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }`
*/
enum?: Array<string>;
/**
* 内置校验方法，校验值是否为身份证号码，组件校验正则为 `/^(\\d{18,18}|\\d{15,15}|\\d{17,17}x)$/i`，示例：`{ idcard: true, message: '请输入正确的身份证号码' }`
*/
idcard?: boolean;
/**
* 内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：`{ len: 10, message: '内容长度不对' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }`
*/
len?: number | boolean;
/**
* 内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ max: 10, message: '内容超出' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }`<br />如果数据类型数字（Number），则自动变为数字大小的比对
*/
max?: number | boolean;
/**
* 校验未通过时呈现的错误信息，值为空则不显示
* @default ''
*/
message?: string;
/**
* 内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：`{ min: 10, message: '内容长度不够' }`。<br />如果希望字母和中文都是同样的长度，示例：`{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }`。<br />如果数据类型数字（Number），则自动变为数字大小的比对
*/
min?: number | boolean;
/**
* 内置校验方法，校验值是否为数字（1.2 、 1e5 都算数字），示例：`{ number: true, message: '请输入数字' }`
*/
number?: boolean;
/**
* 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`
*/
pattern?: RegExp | string;
/**
* 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记
*/
required?: boolean;
/**
* 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }`
*/
telnumber?: boolean;
/**
* 校验触发方式
* @default change
*/
trigger?: ValidateTriggerType;
/**
* 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种
* @default error
*/
type?: 'error' | 'warning';
/**
* 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`
*/
url?: boolean | IsURLOptions;
/**
* 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`
*/
validator?: CustomValidator;
/**
* 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }`
*/
whitespace?: boolean;
}
export interface FormErrorMessage {
/**
* 布尔类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}数据类型必须是布尔类型'`
* @default ''
*/
boolean?: string;
/**
* 日期校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
* @default ''
*/
date?: string;
/**
* 枚举值校验规则不通过时的表单项显示文案，全局配置默认是：`${name}只能是${validate}等`
* @default ''
*/
enum?: string;
/**
* 身份证号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
* @default ''
*/
idcard?: string;
/**
* 值长度校验不通过时的表单项显示文案，全局配置默认是：`'${name}字符长度必须是 ${validate}'`
* @default ''
*/
len?: string;
/**
* 值的长度太长或值本身太大时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符'`
* @default ''
*/
max?: string;
/**
* 值的长度太短或值本身太小时，校验不通过的表单项显示文案，全局配置默认是：`'${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符'`
* @default ''
*/
min?: string;
/**
* 数字类型校验不通过时的表单项显示文案，全局配置默认是：`'${name}必须是数字'`
* @default ''
*/
number?: string;
/**
* 正则表达式校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
* @default ''
*/
pattern?: string;
/**
* 没有填写必填项时的表单项显示文案，全局配置默认是：`'${name}必填'`
* @default ''
*/
required?: string;
/**
* 手机号号码校验不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
* @default ''
*/
telnumber?: string;
/**
* 链接校验规则不通过时的表单项显示文案，全局配置默认是：`'请输入正确的${name}'`
* @default ''
*/
url?: string;
/**
* 自定义校验规则校验不通过时的表单项显示文案，全局配置默认是：'${name}不符合要求'
* @default ''
*/
validator?: string;
/**
* 值为空格校验不通过时表单项显示文案，全局配置默认是：`'${name}不能为空`
* @default ''
*/
whitespace?: string;
}
export type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> };
export interface SubmitContext<T extends Data = Data> {
e?: FormSubmitEvent;
validateResult: FormValidateResult<T>;
firstError?: string;
fields?: any;
}
export type FormValidateResult<T> = boolean | ValidateResultObj<T>;
export type ValidateResultObj<T> = { [key in keyof T]: boolean | ValidateResultList };
export type ValidateResultList = Array<AllValidateResult>;
export type AllValidateResult = CustomValidateObj | ValidateResultType;
export interface ValidateResultType extends FormRule {
result: boolean;
}
export type ValidateResult<T> = { [key in keyof T]: boolean | ErrorList };
export type ErrorList = Array<FormRule>;
export type ValidateResultContext<T extends Data> = Omit<SubmitContext<T>, 'e'>;
export interface FormResetParams<FormData> {
type?: 'initial' | 'empty';
fields?: Array<keyof FormData>;
}
export type FormValidateMessage<FormData> = { [field in keyof FormData]: FormItemValidateMessage[] };
export interface FormItemValidateMessage {
type: 'warning' | 'error';
message: string;
}
export interface FormValidateParams {
fields?: Array<string>;
showErrorMessage?: boolean;
trigger?: ValidateTriggerType;
}
export type ValidateTriggerType = 'blur' | 'change' | 'submit' | 'all';
export type Data = { [key: string]: any };
export interface IsDateOptions {
format: string;
strictMode: boolean;
delimiters: string[];
}
export type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType>;
export type CustomValidateResolveType = boolean | CustomValidateObj;
export interface CustomValidateObj {
result: boolean;
message: string;
type?: 'error' | 'warning' | 'success';
}
export type ValueType = any;