数字输入框加减自动表单验证

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/index.vue

@@ -84,8 +84,8 @@
                     <a-col :span="24" v-if="!isFloat()">
                       <a-form-item label="挂牌价格" name="FixedPrice" class="inputIconBox">
                         <a-input-number class="commonInput" style="width: 260px" :min="0" v-model:value="formState.FixedPrice" />
-                        <MinusOutlined @click="decreasePrice" />
-                        <PlusOutlined @click="increasePrice" />
+                        <MinusOutlined @click="decreasePrice('FixedPrice')" />
+                        <PlusOutlined @click="increasePrice('FixedPrice')" />
                       </a-form-item>
                     </a-col>
                     <a-col :span="24" v-else>
@@ -102,8 +102,8 @@
                     <a-col :span="24">
                       <a-form-item label="挂牌数量" name="OrderQty" class="inputIconBox">
                         <a-input-number class="commonInput" style="width: 260px" :min="0" :max="getMaxNum()" v-model:value="formState.OrderQty" />
-                        <MinusOutlined @click="decreaseNum" />
-                        <PlusOutlined @click="increaseNum" />
+                        <MinusOutlined @click="decreaseNum('OrderQty')" />
+                        <PlusOutlined @click="increaseNum('OrderQty')" />
                         <span class="input-enumdicname">{{ selected.enumdicname }}</span>
                       </a-form-item>
                     </a-col>

src/views/market/spot_trade/spot_trade_order_transaction/spot_trade_order_transaction_swap/components/post_buying/setup.ts

@@ -1,11 +1,11 @@
 import { BuyOrSell } from "@/common/constants/enumCommon";
 import { validateCommon } from "@/common/setup/validate";
 import { RuleObject } from "ant-design-vue/lib/form/interface";
-import { onBeforeUnmount, reactive, ref, UnwrapRef } from "vue";
+import { onBeforeUnmount, reactive, ref } from "vue";
 import { FormParam } from "./interface";
 
-
-const formState: UnwrapRef<FormParam> = reactive({
+const formRef = ref();
+const formState: FormParam = reactive({
     accountid: undefined,
     FixedPrice: 0,
     OrderQty: 0,
@@ -23,11 +23,11 @@ export function handleForm() {
     const v_price = async (rule: RuleObject, value: number) => {
         return validateCommon(value, '请输入挂牌价格');
     };
-    const formRef = ref();
+
     const rules = {
-        FixedPrice: [{ required: true, message: '请输入挂牌价格', trigger: 'blur', type: 'number', validator: v_price }],
-        OrderQty: [{ required: true, message: '请输入挂牌数量', trigger: 'blur', type: 'number', min: 1 }],
-        PriceMove: [{ required: true, message: '请输入点差', trigger: 'blur', type: 'number' }],
+        FixedPrice: [{ required: true, type: 'number', validator: v_price }],
+        OrderQty: [{ required: true, message: '请输入挂牌数量', type: 'number', min: 1 }],
+        PriceMove: [{ required: true, message: '请输入点差', type: 'number' }],
         accountid: [{ required: true, message: '请输入交易账号' }],
     }
     onBeforeUnmount(() => {
@@ -57,28 +57,32 @@ export function useBuySellDirection() {
 // 价格
 export const usePrice = (decimalplace = 0) => {
     const num = Math.pow(10, -decimalplace); // 小数位变动数
-    function increasePrice() {
+    function increasePrice(field: string) {
         formState.FixedPrice = +(formState.FixedPrice + num).toFixed(decimalplace);
+        formRef.value?.validateField(field); // 触发字段验证
     }
-    function decreasePrice() {
+    function decreasePrice(field: string) {
         if (formState.FixedPrice) {
             formState.FixedPrice = +(formState.FixedPrice - num).toFixed(decimalplace);
         }
+        formRef.value?.validateField(field); // 触发字段验证
     }
     return { increasePrice, decreasePrice };
 };
 
 export const useNum = (getMaxNum: Function) => {
-    function increaseNum() {
+    function increaseNum(field: string) {
         const max = getMaxNum()
         if (max && formState.OrderQty < max) {
             formState.OrderQty++;
         }
+        formRef.value?.validateField(field); // 触发字段验证
     }
-    function decreaseNum() {
+    function decreaseNum(field: string) {
         if (formState.OrderQty) {
             formState.OrderQty--;
         }
+        formRef.value?.validateField(field); // 触发字段验证
     }
     return { increaseNum, decreaseNum };
 }