docs: ✏️ 补充Form设置error-type的示例

Author: xuqingkai

docs/component/form.md

@@ -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 数据结构
 

src/pages.json

@@ -712,6 +712,16 @@
         "navigationBarTitleText": "Sidebar 自定义图标"
       }
     },
+    {
+      "path": "pages/form/demo4",
+      "name": "formDemo4",
+      "style": {
+        "mp-alipay": {
+          "allowsBounceVertical": "NO"
+        },
+        "navigationBarTitleText": "校验提示方式"
+      }
+    },
     {
       "path": "pages/fab/Index",
       "name": "fab",

src/pages/form/Index.vue

@@ -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 {

src/pages/form/demo4.vue

@@ -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>