mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
docs: ✏️ 补充Form设置error-type的示例
This commit is contained in:
xuqingkai
parent
592c37b15e
commit
0e6ea3ead0
@ -137,7 +137,7 @@ const model = reactive<{
|
||||
|
||||
const form = ref()
|
||||
|
||||
function handleSubmit1() {
|
||||
function handleSubmit() {
|
||||
form.value
|
||||
.validate()
|
||||
.then(({ valid, errors }) => {
|
||||
@ -154,7 +154,6 @@ function handleSubmit1() {
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
:::
|
||||
|
||||
## 校验规则
|
||||
@ -403,62 +402,59 @@ const submit = () => {
|
||||
::: code-group
|
||||
|
||||
```html [vue]
|
||||
<wd-form ref="form" :model="model">
|
||||
<wd-form ref="form" :model="model" errorType="toast">
|
||||
<wd-cell-group border>
|
||||
<wd-input
|
||||
label="用户名"
|
||||
label-width="100px"
|
||||
prop="name"
|
||||
prop="value1"
|
||||
clearable
|
||||
v-model="model.name"
|
||||
v-model="model.value1"
|
||||
placeholder="请输入用户名"
|
||||
@blur="handleBlur('name')"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<wd-input
|
||||
label="联系方式"
|
||||
prop="phoneNumber"
|
||||
label="密码"
|
||||
label-width="100px"
|
||||
prop="value2"
|
||||
show-password
|
||||
clearable
|
||||
@blur="handleBlur('phoneNumber')"
|
||||
v-model="model.phoneNumber"
|
||||
placeholder="联系方式"
|
||||
:rules="[{ required: true, message: '请填写联系方式' }]"
|
||||
v-model="model.value2"
|
||||
placeholder="请输入密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
</wd-cell-group>
|
||||
<view class="footer">
|
||||
<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
|
||||
</view>
|
||||
</wd-form>
|
||||
|
||||
<view class="footer">
|
||||
<wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
|
||||
</view>
|
||||
```
|
||||
|
||||
```typescript [typescript]
|
||||
<script lang="ts" setup>
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const { success: showSuccess } = useToast()
|
||||
const model = reactive<{
|
||||
name: string
|
||||
phoneNumber: string
|
||||
value1: string
|
||||
value2: string
|
||||
}>({
|
||||
name: '',
|
||||
phoneNumber: ''
|
||||
value1: '',
|
||||
value2: ''
|
||||
})
|
||||
|
||||
const { success: showSuccess } = useToast()
|
||||
const form = ref()
|
||||
|
||||
function handleBlur(prop: string) {
|
||||
form.value.validate(prop)
|
||||
}
|
||||
const form = ref<FormInstance>()
|
||||
|
||||
function handleSubmit() {
|
||||
form.value
|
||||
.validate()
|
||||
.then(({ valid }) => {
|
||||
form
|
||||
.value!.validate()
|
||||
.then(({ valid, errors }) => {
|
||||
if (valid) {
|
||||
showSuccess('校验通过')
|
||||
showSuccess({
|
||||
msg: '校验通过'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -573,7 +569,15 @@ function handleSubmit() {
|
||||
<wd-switch v-model="model.switchVal" />
|
||||
</view>
|
||||
</wd-cell>
|
||||
<wd-input label="歪比巴卜" label-width="100px" prop="cardId" suffix-icon="camera" placeholder="请输入歪比巴卜" clearable v-model="model.cardId" />
|
||||
<wd-input
|
||||
label="歪比巴卜"
|
||||
label-width="100px"
|
||||
prop="cardId"
|
||||
suffix-icon="camera"
|
||||
placeholder="请输入歪比巴卜"
|
||||
clearable
|
||||
v-model="model.cardId"
|
||||
/>
|
||||
<wd-input label="玛卡巴卡" label-width="100px" prop="phone" placeholder="请输入玛卡巴卡" clearable v-model="model.phone" />
|
||||
<wd-cell title="活动图片" title-width="100px" prop="fileList">
|
||||
<wd-upload :file-list="model.fileList" action="https://ftf.jd.com/api/uploadImg" @change="handleFileChange"></wd-upload>
|
||||
@ -916,12 +920,12 @@ function handleIconClick() {
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ----- | ------------ | --------------------- | ------ | ------ | -------- |
|
||||
| model | 表单数据对象 | `Record<string, any>` | - | - | 0.2.0 |
|
||||
| rules | 表单验证规则 | `FormRules` | - | - | 0.2.0 |
|
||||
| resetOnChange | 表单数据变化时是否重置表单提示信息（设置为false时需要开发者单独对变更项进行校验） | `boolean` | - | `true` | 0.2.16 |
|
||||
| errorType | 校验错误提示方式 | `toast/message/none` | - | `message` | $LOWEST_VERSION$ |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------- | ----------------------------------------------------------------------------------- | --------------------- | ------ | --------- | ---------------- |
|
||||
| model | 表单数据对象 | `Record<string, any>` | - | - | 0.2.0 |
|
||||
| rules | 表单验证规则 | `FormRules` | - | - | 0.2.0 |
|
||||
| resetOnChange | 表单数据变化时是否重置表单提示信息（设置为 false 时需要开发者单独对变更项进行校验） | `boolean` | - | `true` | 0.2.16 |
|
||||
| errorType | 校验错误提示方式 | `toast/message/none` | - | `message` | $LOWEST_VERSION$ |
|
||||
|
||||
### FormItemRule 数据结构
|
||||
|
||||
|
||||
@ -712,6 +712,16 @@
|
||||
"navigationBarTitleText": "Sidebar 自定义图标"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/form/demo4",
|
||||
"name": "formDemo4",
|
||||
"style": {
|
||||
"mp-alipay": {
|
||||
"allowsBounceVertical": "NO"
|
||||
},
|
||||
"navigationBarTitleText": "校验提示方式"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/fab/Index",
|
||||
"name": "fab",
|
||||
|
||||
@ -104,6 +104,12 @@
|
||||
<wd-button @click="handleClick3" :round="false" block size="large">复杂表单</wd-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="校验提示方式" transparent>
|
||||
<view class="demo-button">
|
||||
<wd-button @click="handleClick4" :round="false" block size="large">校验提示方式</wd-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
</page-wraper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -199,6 +205,10 @@ function handleClick2() {
|
||||
function handleClick3() {
|
||||
uni.navigateTo({ url: '/pages/form/demo3' })
|
||||
}
|
||||
|
||||
function handleClick4() {
|
||||
uni.navigateTo({ url: '/pages/form/demo4' })
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.demo-button {
|
||||
|
||||
61
src/pages/form/demo4.vue
Normal file
61
src/pages/form/demo4.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<page-wraper>
|
||||
<wd-form ref="form" :model="model" errorType="toast">
|
||||
<wd-cell-group border>
|
||||
<wd-input
|
||||
label="用户名"
|
||||
label-width="100px"
|
||||
prop="value1"
|
||||
clearable
|
||||
v-model="model.value1"
|
||||
placeholder="请输入用户名"
|
||||
:rules="[{ required: true, message: '请填写用户名' }]"
|
||||
/>
|
||||
<wd-input
|
||||
label="密码"
|
||||
label-width="100px"
|
||||
prop="value2"
|
||||
show-password
|
||||
clearable
|
||||
v-model="model.value2"
|
||||
placeholder="请输入密码"
|
||||
:rules="[{ required: true, message: '请填写密码' }]"
|
||||
/>
|
||||
</wd-cell-group>
|
||||
<view class="footer">
|
||||
<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
|
||||
</view>
|
||||
</wd-form>
|
||||
</page-wraper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
import type { FormInstance } from '@/uni_modules/wot-design-uni/components/wd-form/types'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
const { success: showSuccess } = useToast()
|
||||
const model = reactive<{
|
||||
value1: string
|
||||
value2: string
|
||||
}>({
|
||||
value1: '',
|
||||
value2: ''
|
||||
})
|
||||
|
||||
const form = ref<FormInstance>()
|
||||
|
||||
function handleSubmit() {
|
||||
form
|
||||
.value!.validate()
|
||||
.then(({ valid, errors }) => {
|
||||
if (valid) {
|
||||
showSuccess({
|
||||
msg: '校验通过'
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error, 'error')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user