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
This commit is contained in:
parent
d52e03f6cb
commit
0d966ad6cc
|
@ -4,7 +4,7 @@
|
|||
<div>validate用法:<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
|
||||
</div>
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
|
||||
<tiny-form-item label="必填" prop="users" required :validate-icon="validateIcon">
|
||||
<tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
|
||||
<tiny-input v-model="createData.users"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="日期" prop="datepicker">
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<div>validate用法:<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
|
||||
</div>
|
||||
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
|
||||
<tiny-form-item label="必填" prop="users" required :validate-icon="validateIcon">
|
||||
<tiny-form-item label="必填" prop="users" :validate-icon="validateIcon">
|
||||
<tiny-input v-model="createData.users"></tiny-input>
|
||||
</tiny-form-item>
|
||||
<tiny-form-item label="日期" prop="datepicker">
|
||||
|
|
|
@ -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)
|
||||
})
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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: [] }
|
||||
}
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in New Issue