feat: 添加提现表单验证规则，优化用户输入体验

src/views/withdraw/index.vue

@@ -1,50 +1,35 @@
 <script lang='ts' setup>
+import type { GenericObject } from "vee-validate";
 import type { WithdrawBody } from "@/api/types";
 import { toastController } from "@ionic/vue";
+import { ErrorMessage, Field, Form } from "vee-validate";
 import { client, safeClient } from "@/api";
 import { AssetCodeEnum, ChainEnum, WithdrawMethodEnum } from "@/api/enum";
+import { createWithdrawSchema } from "./rules";
 
 const { t } = useI18n();
+const router = useRouter();
+const walletStore = useWalletStore();
+const { balances, bankAccounts } = storeToRefs(walletStore);
 
-const amountInputInst = useTemplateRef<InputInstance>("amountInputInst");
-const [form, resetForm] = useResetRef<WithdrawBody>({
+const initialValues: WithdrawBody = {
   assetCode: AssetCodeEnum.USDT,
   amount: "",
   withdrawMethod: WithdrawMethodEnum.BANK,
   toAddress: "",
   bankAccountId: "",
   chain: "BEP20",
-});
-const walletStore = useWalletStore();
-const { balances, bankAccounts } = storeToRefs(walletStore);
+};
+
 const maxAmount = computed(() => {
-  const balance = balances.value?.find(item => item.assetCode === form.value.assetCode);
+  const balance = balances.value?.find(item => item.assetCode === initialValues.assetCode);
   return balance ? balance.available : "0";
 });
-const router = useRouter();
 
-function markTouched() {
-  amountInputInst.value?.$el.classList.add("ion-touched");
-}
-function validate(value: string) {
-  amountInputInst.value?.$el.classList.remove("ion-valid");
-  amountInputInst.value?.$el.classList.remove("ion-invalid");
+const schema = computed(() => createWithdrawSchema(t, maxAmount.value));
 
-  if (value === "") {
-    return false;
-  }
-  const isNumber = numberPattern.test(value);
-
-  isNumber ? amountInputInst.value?.$el.classList.add("ion-valid") : amountInputInst.value?.$el.classList.add("ion-invalid");
-
-  return isNumber;
-}
-function handleCurrentChange() {
-  form.value.amount = "";
-}
-
-async function onSubmit() {
-  await safeClient(() => client.api.withdraw.post(form.value));
+async function onSubmit(values: GenericObject) {
+  await safeClient(() => client.api.withdraw.post(values as WithdrawBody));
   const toast = await toastController.create({
     message: t("withdraw.successMessage"),
     duration: 2000,
@@ -53,7 +38,6 @@ async function onSubmit() {
   });
 
   await toast.present();
-  resetForm();
   router.back();
 }
 </script>
@@ -69,80 +53,127 @@ async function onSubmit() {
       </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true" class="ion-padding">
-      <div class="flex flex-col gap-5">
-        <ion-radio-group v-model="form.assetCode" @ion-change="handleCurrentChange">
-          <ion-label class="text-sm">
-            {{ t("withdraw.chooseCurrency") }}
-          </ion-label>
-          <ion-item v-for="item in AssetCodeEnum" :key="item">
-            <ion-radio :value="item" justify="space-between">
-              {{ item }}
-            </ion-radio>
-          </ion-item>
-        </ion-radio-group>
+      <Form
+        :validation-schema="schema"
+        :initial-values="initialValues"
+        @submit="onSubmit"
+      >
+        <div class="flex flex-col gap-5">
+          <div>
+            <Field name="assetCode">
+              <template #default="{ field, value }">
+                <ion-radio-group v-bind="field" :model-value="value">
+                  <ion-label class="text-sm">
+                    {{ t("withdraw.chooseCurrency") }}
+                  </ion-label>
+                  <ion-item v-for="item in AssetCodeEnum" :key="item">
+                    <ion-radio :value="item" justify="space-between">
+                      {{ item }}
+                    </ion-radio>
+                  </ion-item>
+                </ion-radio-group>
+              </template>
+            </Field>
+            <ErrorMessage name="assetCode" class="text-red-500 text-xs mt-1" />
+          </div>
 
-        <ion-radio-group v-model="form.withdrawMethod">
-          <ion-label class="text-sm">
-            {{ t("withdraw.chooseMethod") }}
-          </ion-label>
-          <ion-item v-for="item in WithdrawMethodEnum" :key="item">
-            <ion-radio :value="item" justify="space-between">
-              {{ item }}
-            </ion-radio>
-          </ion-item>
-        </ion-radio-group>
+          <div>
+            <Field name="withdrawMethod">
+              <template #default="{ field, value }">
+                <ion-radio-group v-bind="field" :model-value="value">
+                  <ion-label class="text-sm">
+                    {{ t("withdraw.chooseMethod") }}
+                  </ion-label>
+                  <ion-item v-for="item in WithdrawMethodEnum" :key="item">
+                    <ion-radio :value="item" justify="space-between">
+                      {{ item }}
+                    </ion-radio>
+                  </ion-item>
+                </ion-radio-group>
+              </template>
+            </Field>
+            <ErrorMessage name="withdrawMethod" class="text-red-500 text-xs mt-1" />
+          </div>
 
-        <ui-input-label
-          ref="amountInputInst"
-          v-model="form.amount"
-          :label="t('withdraw.amount')"
-          :placeholder="t('withdraw.enterAmountMax', { amount: maxAmount })"
-          type="number"
-          inputmode="numeric"
-          :error-text="t('withdraw.validAmountError')"
-          :max="maxAmount"
-          @ion-input="validate($event.target.value as string)"
-          @ion-blur="markTouched"
-        />
+          <Field name="withdrawMethod">
+            <template #default="{ value: withdrawMethod }">
+              <div v-if="withdrawMethod === WithdrawMethodEnum.BANK">
+                <Field name="bankAccountId">
+                  <template #default="{ field }">
+                    <ion-select
+                      v-bind="field"
+                      interface="action-sheet"
+                      toggle-icon=""
+                      label-placement="floating"
+                      :label="t('withdraw.bankAccountId')"
+                      :placeholder="t('withdraw.enterBankAccountId')"
+                    >
+                      <ion-select-option v-for="item in bankAccounts" :key="item.id" :value="item.id">
+                        {{ item.bankName }} - **** **** **** {{ item.accountName.slice(-4) }}
+                      </ion-select-option>
+                    </ion-select>
+                  </template>
+                </Field>
+                <ErrorMessage name="bankAccountId" class="text-red-500 text-xs mt-1" />
+              </div>
 
-        <ion-select
-          v-if="form.withdrawMethod === WithdrawMethodEnum.BANK"
-          v-model="form.bankAccountId"
-          interface="action-sheet"
-          toggle-icon=""
-          label-placement="floating"
-          :label="t('withdraw.bankAccountId')"
-          :placeholder="t('withdraw.enterBankAccountId')"
-        >
-          <ion-select-option v-for="item in bankAccounts" :key="item.id" :value="item.id">
-            {{ item.bankName }} - **** **** **** {{ item.accountName.slice(-4) }}
-          </ion-select-option>
-        </ion-select>
-        <template v-else-if="form.withdrawMethod === WithdrawMethodEnum.CRYPTO">
-          <ion-radio-group v-model="form.chain">
-            <ion-label class="text-sm">
-              {{ t("withdraw.chooseChain") }}
-            </ion-label>
-            <ion-item v-for="item in ChainEnum" :key="item">
-              <ion-radio :value="item" justify="space-between">
-                {{ item }}
-              </ion-radio>
-            </ion-item>
-          </ion-radio-group>
-          <ui-input-label
-            v-model="form.toAddress"
-            :label="t('withdraw.cryptoAddress')"
-            :placeholder="t('withdraw.enterCryptoAddress')"
-            type="text"
-            inputmode="text"
-            :error-text="t('withdraw.validCryptoAddressError')"
-          />
-        </template>
+              <template v-else-if="withdrawMethod === WithdrawMethodEnum.CRYPTO">
+                <div>
+                  <Field name="chain">
+                    <template #default="{ field, value }">
+                      <ion-radio-group v-bind="field" :model-value="value">
+                        <ion-label class="text-sm">
+                          {{ t("withdraw.chooseChain") }}
+                        </ion-label>
+                        <ion-item v-for="item in ChainEnum" :key="item">
+                          <ion-radio :value="item" justify="space-between">
+                            {{ item }}
+                          </ion-radio>
+                        </ion-item>
+                      </ion-radio-group>
+                    </template>
+                  </Field>
+                  <ErrorMessage name="chain" class="text-red-500 text-xs mt-1" />
+                </div>
 
-        <ion-button expand="block" @click="onSubmit">
-          {{ t("withdraw.submit") }}
-        </ion-button>
-      </div>
+                <div>
+                  <Field name="toAddress">
+                    <template #default="{ field }">
+                      <ui-input-label
+                        v-bind="field"
+                        :label="t('withdraw.cryptoAddress')"
+                        :placeholder="t('withdraw.enterCryptoAddress')"
+                        type="text"
+                        inputmode="text"
+                      />
+                    </template>
+                  </Field>
+                  <ErrorMessage name="toAddress" class="text-red-500 text-xs mt-1" />
+                </div>
+              </template>
+            </template>
+          </Field>
+
+          <div>
+            <Field name="amount">
+              <template #default="{ field }">
+                <ui-input-label
+                  v-bind="field"
+                  :label="t('withdraw.amount')"
+                  :placeholder="t('withdraw.enterAmountMax', { amount: maxAmount })"
+                  type="number"
+                  inputmode="numeric"
+                />
+              </template>
+            </Field>
+            <ErrorMessage name="amount" class="text-red-500 text-xs mt-1" />
+          </div>
+
+          <ion-button expand="block" type="submit">
+            {{ t("withdraw.submit") }}
+          </ion-button>
+        </div>
+      </Form>
     </IonContent>
   </ion-page>
 </template>

src/views/withdraw/rules.ts

@@ -0,0 +1,41 @@
+import { toTypedSchema } from "@vee-validate/yup";
+import * as yup from "yup";
+import { WithdrawMethodEnum } from "@/api/enum";
+
+export function createWithdrawSchema(t: (key: string, params?: any) => string, maxAmount: string) {
+  return toTypedSchema(
+    yup.object({
+      assetCode: yup.string().required(t("withdraw.validation.assetCodeRequired")),
+      amount: yup
+        .string()
+        .required(t("withdraw.validation.amountRequired"))
+        .test("is-number", t("withdraw.validation.amountInvalid"), value => {
+          return /^\d+(\.\d+)?$/.test(value || "");
+        })
+        .test("max-amount", t("withdraw.validation.amountExceedsBalance"), value => {
+          if (!value || maxAmount === "0") return false;
+          return parseFloat(value) <= parseFloat(maxAmount);
+        })
+        .test("min-amount", t("withdraw.validation.amountTooSmall"), value => {
+          if (!value) return false;
+          return parseFloat(value) > 0;
+        }),
+      withdrawMethod: yup.string().required(t("withdraw.validation.methodRequired")),
+      bankAccountId: yup.string().when("withdrawMethod", {
+        is: WithdrawMethodEnum.BANK,
+        then: (schema) => schema.required(t("withdraw.validation.bankAccountRequired")),
+        otherwise: (schema) => schema.optional(),
+      }),
+      chain: yup.string().when("withdrawMethod", {
+        is: WithdrawMethodEnum.CRYPTO,
+        then: (schema) => schema.required(t("withdraw.validation.chainRequired")),
+        otherwise: (schema) => schema.optional(),
+      }),
+      toAddress: yup.string().when("withdrawMethod", {
+        is: WithdrawMethodEnum.CRYPTO,
+        then: (schema) => schema.required(t("withdraw.validation.addressRequired")).min(10, t("withdraw.validation.addressTooShort")),
+        otherwise: (schema) => schema.optional(),
+      }),
+    }),
+  );
+}