From 0d966ad6cca5a3f142ea14f4667112b90727bf29 Mon Sep 17 00:00:00 2001 From: gimmyhehe <975402925@qq.com> Date: Tue, 2 Jan 2024 19:58:44 +0800 Subject: [PATCH] docs(form): [form] form docs add trigger usage (#1240) * docs(form): [form] form docs add trigger usage * docs(form): [form] form docs add trigger usage --- .../pc/app/form/form-validation-composition-api.vue | 2 +- examples/sites/demos/pc/app/form/form-validation.vue | 2 +- .../sites/demos/pc/app/form/popper-options.spec.ts | 1 + examples/sites/demos/pc/app/form/webdoc/form.js | 3 ++- examples/sites/demos/pc/webdoc/form-valid-en.md | 12 +++++++++--- examples/sites/demos/pc/webdoc/form-valid.md | 4 +++- 6 files changed, 17 insertions(+), 7 deletions(-) diff --git a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue index 080e1b019..1ae83589f 100644 --- a/examples/sites/demos/pc/app/form/form-validation-composition-api.vue +++ b/examples/sites/demos/pc/app/form/form-validation-composition-api.vue @@ -4,7 +4,7 @@
validate用法：
- + diff --git a/examples/sites/demos/pc/app/form/form-validation.vue b/examples/sites/demos/pc/app/form/form-validation.vue index 995d0bf06..c7453a318 100644 --- a/examples/sites/demos/pc/app/form/form-validation.vue +++ b/examples/sites/demos/pc/app/form/form-validation.vue @@ -4,7 +4,7 @@
validate用法：
- + diff --git a/examples/sites/demos/pc/app/form/popper-options.spec.ts b/examples/sites/demos/pc/app/form/popper-options.spec.ts index 162ca3a3a..e5de074d9 100644 --- a/examples/sites/demos/pc/app/form/popper-options.spec.ts +++ b/examples/sites/demos/pc/app/form/popper-options.spec.ts @@ -13,6 +13,7 @@ test('错误提示配置', async ({ page }) => { let beforeBox = await tooltip.first().boundingBox() await page.locator('#app').click() await page.mouse.wheel(0, 2000) + await page.waitForTimeout(200) let afterBox = await tooltip.first().boundingBox() expect(afterBox?.y).toBeLessThan(beforeBox?.y || 0) }) diff --git a/examples/sites/demos/pc/app/form/webdoc/form.js b/examples/sites/demos/pc/app/form/webdoc/form.js index 3785de396..aaaef178a 100644 --- a/examples/sites/demos/pc/app/form/webdoc/form.js +++ b/examples/sites/demos/pc/app/form/webdoc/form.js @@ -730,7 +730,8 @@ interface IFormRules { message?: number // 校验错误的提示 // 内置的类型校验 type?: 'date' | 'dateTime' | 'float' | 'array' | 'string' | 'number' | 'url' | 'time' | 'email' | 'object' | 'boolean' | 'enum' - trigger?: IFormTrigger | IFormTrigger[] // 校验触发时机， 可设置成数组 ['change', 'blur'] 两种场景都触发 + // 校验触发时机， 默认为 ['change', 'blur'] 两种场景都触发，如果仅在主动调用校验方式时触发，可设置为空数组 []。 + trigger?: IFormTrigger | IFormTrigger[] // 同步检验函数，调用回调传递错误信息。 validator?: ( rule: IFormInnerRule, // from内部处理后的rule diff --git a/examples/sites/demos/pc/webdoc/form-valid-en.md b/examples/sites/demos/pc/webdoc/form-valid-en.md index 75e1ddf06..97e899ced 100644 --- a/examples/sites/demos/pc/webdoc/form-valid-en.md +++ b/examples/sites/demos/pc/webdoc/form-valid-en.md @@ -117,14 +117,20 @@ rules: { #### trigger -By`trigger`Configure the method of triggering the verification rule.`change`When the input box value changes, the verification is triggered.`blur`When the focus is lost, the calibration is triggered. The following is an example: +Configure the way to trigger the verification rules through `trigger`. When it is `change`, the verification is triggered when the input box value changes. When it is `blur`, +the verification is triggered after the input box value is out of focus. Can be set to an array `['change', 'blur']` to trigger both scenarios. The default is to trigger both scenarios. +If it is only triggered when the verification method is actively called, it can be set to an empty array `[]`. An example of usage is as follows: ```js rules: { - users: { len: 2, message: 'The length must be 2', trigger: 'change' } + users: { len: 2, message: 'The length must be 2', trigger: 'change' }, + password: { len: 2, message: 'The length must be 2', trigger: ['change', 'blur'] }, + nickname: { len: 10, message: 'Duplicate name already exists', trigger: [] } } ``` +```` + The configurable values are as follows: - `blur`: The verification is triggered after the focus is out of focus. @@ -139,7 +145,7 @@ Enumerated value validation, which verifies whether the value of the field is in rules: { role: { type: 'enum', enum: ['admin', 'user', 'guest'] } } -``` +```` #### whitespace diff --git a/examples/sites/demos/pc/webdoc/form-valid.md b/examples/sites/demos/pc/webdoc/form-valid.md index be3928a50..261329ad7 100644 --- a/examples/sites/demos/pc/webdoc/form-valid.md +++ b/examples/sites/demos/pc/webdoc/form-valid.md @@ -117,12 +117,14 @@ rules: { #### trigger -通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。可设置成数组 `['change', 'blur']` 两种场景都触发。使用示例如下所示： +通过 `trigger` 配置触发校验规则的方式，为 `change` 时，当输入框值改变即触发校验，为 `blur` 时则失焦后触发校验。可设置成数组 `['change', 'blur']` 两种场景都触发，默认为两种场景都触发。 +如果如果仅在主动调用校验方式时触发，可设置为空数组 `[]`。使用示例如下所示： ```js rules: { users: { len: 2, message: '长度必须为2', trigger: 'change' }, password: { len: 2, message: '长度必须为2', trigger: ['change', 'blur'] }, + nickname: { len: 10, message: '已存在重复名称', trigger: [] } } ```