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

2025-12-17 15:59:11 +07:00
parent ef76de7a5c
commit 61cbcce579
4 changed files with 197 additions and 101 deletions
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -40,7 +40,19 @@
    "enterCryptoAddress": "Enter the crypto address",
    "validCryptoAddressError": "Please enter a valid crypto address.",
    "successMessage": "Withdrawal request submitted successfully!",
-    "submit": "Submit"
+    "submit": "Submit",
+    "validation": {
+      "assetCodeRequired": "Please select a currency",
+      "amountRequired": "Please enter an amount",
+      "amountInvalid": "Please enter a valid number format",
+      "amountExceedsBalance": "Amount cannot exceed available balance",
+      "amountTooSmall": "Amount must be greater than 0",
+      "methodRequired": "Please select a withdrawal method",
+      "bankAccountRequired": "Please select a bank account",
+      "chainRequired": "Please select a blockchain network",
+      "addressRequired": "Please enter a withdrawal address",
+      "addressTooShort": "Address format is incorrect, too short"
+    }
  },
  "bankCard": {
    "management": "Bank Card Management",
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -40,7 +40,19 @@
    "enterCryptoAddress": "请输入加密货币地址",
    "validCryptoAddressError": "请输入有效的加密货币地址。",
    "successMessage": "提现申请提交成功！",
-    "submit": "提交"
+    "submit": "提交",
+    "validation": {
+      "assetCodeRequired": "请选择货币",
+      "amountRequired": "请输入金额",
+      "amountInvalid": "请输入有效的数字格式",
+      "amountExceedsBalance": "金额不能超过可用余额",
+      "amountTooSmall": "金额必须大于0",
+      "methodRequired": "请选择提现方式",
+      "bankAccountRequired": "请选择银行账户",
+      "chainRequired": "请选择区块链网络",
+      "addressRequired": "请输入提现地址",
+      "addressTooShort": "地址格式不正确，长度过短"
+    }
  },
  "bankCard": {
    "management": "银行卡管理",
--- a/src/views/withdraw/index.vue
+++ b/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,8 +53,16 @@ async function onSubmit() {
      </ion-toolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
+      <Form
+        :validation-schema="schema"
+        :initial-values="initialValues"
+        @submit="onSubmit"
+      >
        <div class="flex flex-col gap-5">
-        <ion-radio-group v-model="form.assetCode" @ion-change="handleCurrentChange">
+          <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>
@@ -80,8 +72,15 @@ async function onSubmit() {
                    </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">
+          <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>
@@ -91,23 +90,18 @@ async function onSubmit() {
                    </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-if="form.withdrawMethod === WithdrawMethodEnum.BANK"
-          v-model="form.bankAccountId"
+                      v-bind="field"
                      interface="action-sheet"
                      toggle-icon=""
                      label-placement="floating"
@@ -118,8 +112,16 @@ async function onSubmit() {
                        {{ 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">
+                  </template>
+                </Field>
+                <ErrorMessage name="bankAccountId" class="text-red-500 text-xs mt-1" />
+              </div>
+
+              <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>
@@ -129,20 +131,49 @@ async function onSubmit() {
                          </ion-radio>
                        </ion-item>
                      </ion-radio-group>
+                    </template>
+                  </Field>
+                  <ErrorMessage name="chain" class="text-red-500 text-xs mt-1" />
+                </div>
+
+                <div>
+                  <Field name="toAddress">
+                    <template #default="{ field }">
                      <ui-input-label
-            v-model="form.toAddress"
+                        v-bind="field"
                        :label="t('withdraw.cryptoAddress')"
                        :placeholder="t('withdraw.enterCryptoAddress')"
                        type="text"
                        inputmode="text"
-            :error-text="t('withdraw.validCryptoAddressError')"
                      />
                    </template>
+                  </Field>
+                  <ErrorMessage name="toAddress" class="text-red-500 text-xs mt-1" />
+                </div>
+              </template>
+            </template>
+          </Field>

-        <ion-button expand="block" @click="onSubmit">
+          <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>
--- a/src/views/withdraw/rules.ts
+++ b/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(),
+      }),
+    }),
+  );
+}