fix: demo page

Author: mynetfan

playground/src/views/examples/form/custom.vue

@@ -18,7 +18,7 @@ const [Form] = useVbenForm({
     },
     labelClass: 'w-2/6',
   },
-  fieldMappingTime: [['field4', ['areaCode', 'phone'], null]],
+  fieldMappingTime: [['field4', ['phoneType', 'phoneNumber'], null]],
   // 提交函数
   handleSubmit: onSubmit,
   // 垂直布局，label和input在不同行，值为vertical
@@ -56,16 +56,19 @@ const [Form] = useVbenForm({
     },
     {
       component: markRaw(TwoFields),
-      defaultValue: [undefined, '188'],
+      defaultValue: [undefined, ''],
       disabledOnChangeListener: false,
       fieldName: 'field4',
       formItemClass: 'col-span-1',
       label: '组合字段',
       rules: z
         .array(z.string().optional())
-        .length(2, '请输入手机号码')
+        .length(2, '请选择类型并输入手机号码')
         .refine((v) => !!v[0], {
-          message: '请选择区号',
+          message: '请选择类型',
+        })
+        .refine((v) => !!v[1] && v[1] !== '', {
+          message: '　　　　　　　输入手机号码',
         })
         .refine((v) => v[1]?.match(/^1[3-9]\d{9}$/), {
           // 使用全角空格占位，将错误提示文字挤到手机号码输入框的下面

playground/src/views/examples/form/modules/two-fields.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { Input, Select } from 'ant-design-vue';
 
-const emit = defineEmits(['blur', 'change', 'change']);
+const emit = defineEmits(['blur', 'change']);
 
 const modelValue = defineModel<[string, string]>({
-  default: ['+85', ''],
+  default: () => [undefined, undefined],
 });
 
 function onChange() {
@@ -16,19 +16,21 @@ function onChange() {
     <Select
       v-model:value="modelValue[0]"
       class="w-[80px]"
-      show-search
-      placeholder="区码"
+      placeholder="类型"
+      allow-clear
       :class="{ 'valid-success': !!modelValue[0] }"
+      :options="[
+        { label: '个人', value: 'personal' },
+        { label: '工作', value: 'work' },
+        { label: '私密', value: 'private' },
+      ]"
       @blur="emit('blur')"
       @change="onChange"
-    >
-      <Select.Option value="+82">+82</Select.Option>
-      <Select.Option value="+85">+85</Select.Option>
-      <Select.Option value="+86">+86</Select.Option>
-    </Select>
+    />
     <Input
       placeholder="请输入11位手机号码"
       class="flex-1"
+      allow-clear
       :class="{ 'valid-success': modelValue[1]?.match(/^1[3-9]\d{9}$/) }"
       v-model:value="modelValue[1]"
       :maxlength="11"