@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/form/README.en-US.md

@@ -22,17 +22,14 @@ 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
+required-mark | Boolean | true | \- | N
+required-mark-position | String | left | 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
+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/blob/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
@@ -41,19 +38,19 @@ submit-with-warning-message | Boolean | false | \- | N
 
 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/>
+reset | `(context: { e?: FormResetEvent })` | [see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)
+submit | `(context: SubmitContext<FormData>)` | [see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/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/blob/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/>
+reset | `(params?: FormResetParams<FormData>)` | \- | required。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/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/blob/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/>
+validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormData>> ` | required。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/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/><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/>
 
 
 ### FormItem Props
@@ -62,15 +59,13 @@ 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
+rules | Array | - | Typescript: `Array<FormRule> `，[Form API Documents](./form?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form-item/type.ts) | N
 show-error-message | Boolean | undefined | \- | N
 
 ### FormItem Slots
@@ -85,8 +80,8 @@ label | \-
 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
+date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
+email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
 enum | Array | - | Typescript: `Array<string>` | N
 idcard | Boolean | - | \- | N
 len | Number / Boolean | - | \- | N
@@ -99,8 +94,8 @@ 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
+url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
+validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType, context?: { formData: Data , name: string }) => 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/blob/develop/packages/uniapp-components/form/type.ts) | N
 whitespace | Boolean | - | \- | N
 
 ### FormErrorMessage
@@ -128,10 +123,8 @@ The component provides the following CSS variables, which can be used to customi
 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-border-color | @component-stroke | -
+--td-form-item-border-left-space | @form-item-vertical-padding | -
+--td-form-item-border-right-space | 0 | -
 --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 | -

package/dist/form/README.md

@@ -1,7 +1,7 @@
 ---
 title: Form 表单
 description: 用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。
-spline: base
+spline: form
 isComponent: true
 toc: false
 ---
@@ -31,17 +31,14 @@ import TFormItem from '@tdesign/uniapp/form-item/form-item.vue';
 -- | -- | -- | -- | --
 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
+required-mark | Boolean | true | 是否显示必填符号（*），默认显示 | N
+required-mark-position | String | left | 表单必填符号（*）显示位置。可选项：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
+rules | Object | - | 表单字段校验规则。TS 类型：`FormRules<FormData>` `type FormRules<T extends Data = any> = { [field in keyof T]?: Array<FormRule> }`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/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
@@ -50,19 +47,19 @@ submit-with-warning-message | Boolean | false | 【讨论中】当校验结果
 
 名称 | 参数 | 描述
 -- | -- | --
-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/>
+reset | `(context: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/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/blob/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/blob/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/>
+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/blob/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/blob/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/>
+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/blob/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/><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/>
 
 
 ### FormItem Props
@@ -71,15 +68,13 @@ validate | `(params?: FormValidateParams)` | `Promise<FormValidateResult<FormDat
 -- | -- | -- | -- | --
 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
+rules | Array | - | 表单字段校验规则。TS 类型：`Array<FormRule> `，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form-item/type.ts) | N
 show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N
 
 ### FormItem Slots
@@ -94,8 +89,8 @@ label | 自定义 `label` 显示内容
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 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
+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/blob/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 { IsEmailOptions } from 'validator/es/lib/isEmail'`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/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
@@ -108,8 +103,8 @@ required | Boolean | - | 内置校验方法，校验值是否已经填写。该
 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
+url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/form/type.ts) | N
+validator | Function | - | 自定义校验规则，context 中 formData 为当前完整表单值，name为该字段的标识，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType, context?: { formData: Data , name: string }) => 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/blob/develop/packages/uniapp-components/form/type.ts) | N
 whitespace | Boolean | - | 内置校验方法，校验值是否为空格。示例：`{ whitespace: true, message: '值不能为空' }` | N
 
 ### FormErrorMessage
@@ -137,10 +132,8 @@ whitespace | String | - | 值为空格校验不通过时表单项显示文案，
 名称 | 默认值 | 描述 
 -- | -- | --
 --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-border-color | @component-stroke | -
+--td-form-item-border-left-space | @form-item-vertical-padding | -
+--td-form-item-border-right-space | 0 | -
 --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 | -

package/dist/form/form.css

@@ -1,169 +1,4 @@
 .t-form {
-  position: relative;
-  width: 100%;
+  display: block;
   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);
 }