feat(表单验证): 添加数字输入验证函数并应用至多个表单字段

实现通用数字输入验证函数 validateNumberInput，限制输入范围为0-99999，可选择是否允许小数将验证函数应用于价格、里程、时速等表单字段，移除myAuthCar页面中注释的价格显示代码

feat(表单验证): 添加数字输入验证函数并应用至多个表单字段
实现通用数字输入验证函数 validateNumberInput，限制输入范围为0-99999，可选择是否允许小数将验证函数应用于价格、里程、时速等表单字段，移除myAuthCar页面中注释的价格显示代码
hookehuyr
Commit ac331e9a0449458c3e81bc0c9d9908fd78e81be9 ac331e9a 1 parent 524734f1
Showing 3 changed files with 129 additions and 39 deletions
src/pages/myAuthCar/index.vue
src/pages/sell/index.vue
src/pages/setAuthCar/index.vue
--- a/src/pages/myAuthCar/index.vue
View file @ac331e9
+++ b/src/pages/myAuthCar/index.vue
View file @ac331e9
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-16 16:53:13
+ * @LastEditTime: 2025-07-16 17:02:41
  * @FilePath: /jgdl/src/pages/myAuthCar/index.vue
  * @Description: 我的认证车页面
 -->
@@ -47,7 +47,7 @@
                                 <view v-if="item.verification_status === 7 && item.verification_reason" class="verification-reason mt-1">
                                     <text class="text-xs text-red-500">审核结果：{{ item.verification_reason }}</text>
                                 </view>
-                                <view class="mt-2 flex justify-between items-center">
+                                <!-- <view class="mt-2 flex justify-between items-center">
                                     <view>
                                         <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
                                             ¥ {{ item.price?.toLocaleString() }}
@@ -56,7 +56,7 @@
                                             ¥ {{ item.market_price?.toLocaleString() }}
                                         </text>
                                     </view>
-                                </view>
+                                </view> -->
                                 <view class="action-buttons mt-4">
                                     <nut-button
                                         v-if="item.review_status === 7"
--- a/src/pages/sell/index.vue
View file @ac331e9
+++ b/src/pages/sell/index.vue
View file @ac331e9
@@ -154,7 +154,7 @@
                     <!-- 行驶里程 -->
                     <nut-form-item label="行驶里程" prop="total_mileage_km" required
                         :rules="[{ required: true, message: '请输入行驶里程' }]">
-                        <nut-input v-model="formData.total_mileage_km" placeholder="请输入" type="number" input-align="right">
+                        <nut-input v-model="formData.total_mileage_km" placeholder="请输入" type="number" input-align="right" @input="validateMileageInput">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -163,7 +163,7 @@
                     <!-- 续航里程 -->
                     <nut-form-item label="续航里程" prop="range_km">
-                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right">
+                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right" @input="validateRangeInput">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -172,7 +172,8 @@
                     <!-- 最高时速 -->
                     <nut-form-item label="最高时速" prop="max_speed_kmh">
-                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number" input-align="right">
+                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number"
+                            input-align="right" @input="validateMaxSpeedInput">
                             <template #right>
                                 <text class="unit">km/h</text>
                             </template>
@@ -181,8 +182,7 @@
                     <!-- 电池容量 -->
                     <nut-form-item label="电池容量" prop="battery_capacity_ah">
-                        <nut-input v-model="formData.battery_capacity_ah" placeholder="请输入" type="number"
+                        <nut-input v-model="formData.battery_capacity_ah" placeholder="请输入" type="number" input-align="right" @input="validateBatteryCapacityInput">
-                            input-align="right">
                             <template #right>
                                 <text class="unit">Ah</text>
                             </template>
@@ -610,57 +610,91 @@ const showTireWearPicker = () => {
 }
 /**
- * 校验价格输入，只允许数字和小数点
+ * 通用数字输入验证函数，限制范围在0-9999之间
  * @param {Object} event - 输入事件对象
+ * @param {String} field - 字段名
+ * @param {Boolean} allowDecimal - 是否允许小数，默认true
  */
-const validatePriceInput = (event) => {
+const validateNumberInput = (event, field, allowDecimal = true) => {
     let value = event.detail.value
-    // 只保留数字和小数点，删除其他字符
+    // 只保留数字和小数点（如果允许），删除其他字符
-    value = value.replace(/[^0-9.]/g, '')
+    if (allowDecimal) {
+        value = value.replace(/[^0-9.]/g, '')
+
+        // 防止多个小数点，只保留第一个小数点
+        const dotIndex = value.indexOf('.')
+        if (dotIndex !== -1) {
+            value = value.substring(0, dotIndex + 1) + value.substring(dotIndex + 1).replace(/\./g, '')
+        }
-    // 防止多个小数点，只保留第一个小数点
+        // 防止以小数点开头
-    const dotIndex = value.indexOf('.')
+        if (value.startsWith('.')) {
-    if (dotIndex !== -1) {
+            value = '0' + value
-        value = value.substring(0, dotIndex + 1) + value.substring(dotIndex + 1).replace(/\./g, '')
+        }
+    } else {
+        // 只允许整数
+        value = value.replace(/[^0-9]/g, '')
     }
-    // 防止以小数点开头
+    // 限制范围在0-9999之间
-    if (value.startsWith('.')) {
+    const numValue = parseFloat(value)
-        value = '0' + value
+    if (numValue > 99999) {
+        value = '99999'
     }
     // 使用 nextTick 确保视图更新
     Taro.nextTick(() => {
-        formData.price = value
+        formData[field] = value
     })
 }
 /**
- * 校验市场价格输入，只允许数字和小数点
+ * 校验价格输入，只允许数字和小数点，范围0-99999
+ * @param {Object} event - 输入事件对象
+ */
+const validatePriceInput = (event) => {
+    validateNumberInput(event, 'price', true)
+}
+
+/**
+ * 校验市场价格输入，只允许数字和小数点，范围0-99999
  * @param {Object} event - 输入事件对象
  */
 const validateMarketPriceInput = (event) => {
-    let value = event.detail.value
+    validateNumberInput(event, 'market_price', true)
+}
-    // 只保留数字和小数点，删除其他字符
+/**
-    value = value.replace(/[^0-9.]/g, '')
+ * 校验行驶里程输入，只允许整数，范围0-99999
+ * @param {Object} event - 输入事件对象
+ */
+const validateMileageInput = (event) => {
+    validateNumberInput(event, 'total_mileage_km', false)
+}
-    // 防止多个小数点，只保留第一个小数点
+/**
-    const dotIndex = value.indexOf('.')
+ * 校验续航里程输入，只允许整数，范围0-99999
-    if (dotIndex !== -1) {
+ * @param {Object} event - 输入事件对象
-        value = value.substring(0, dotIndex + 1) + value.substring(dotIndex + 1).replace(/\./g, '')
+ */
-    }
+const validateRangeInput = (event) => {
+    validateNumberInput(event, 'range_km', false)
+}
-    // 防止以小数点开头
+/**
-    if (value.startsWith('.')) {
+ * 校验最高时速输入，只允许整数，范围0-99999
-        value = '0' + value
+ * @param {Object} event - 输入事件对象
-    }
+ */
+const validateMaxSpeedInput = (event) => {
+    validateNumberInput(event, 'max_speed_kmh', false)
+}
-    // 使用 nextTick 确保视图更新
+/**
-    Taro.nextTick(() => {
+ * 校验电池容量输入，允许小数，范围0-99999
-        formData.market_price = value
+ * @param {Object} event - 输入事件对象
-    })
+ */
+const validateBatteryCapacityInput = (event) => {
+    validateNumberInput(event, 'battery_capacity_ah', true)
 }
 /**
--- a/src/pages/setAuthCar/index.vue
View file @ac331e9
+++ b/src/pages/setAuthCar/index.vue
View file @ac331e9
@@ -100,7 +100,7 @@
                     <!-- 续航里程 -->
                     <nut-form-item label="续航里程" prop="range_km">
-                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right">
+                        <nut-input v-model="formData.range_km" placeholder="请输入" type="number" input-align="right" @input="validateRangeInput">
                             <template #right>
                                 <text class="unit">公里</text>
                             </template>
@@ -109,7 +109,7 @@
                     <!-- 最高时速 -->
                     <nut-form-item label="最高时速" prop="max_speed_kmh">
-                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number" input-align="right">
+                        <nut-input v-model="formData.max_speed_kmh" placeholder="请输入" type="number" input-align="right" @input="validateMaxSpeedInput">
                             <template #right>
                                 <text class="unit">km/h</text>
                             </template>
@@ -329,6 +329,62 @@ const onBrandModelCancel = () => {
 }
 /**
+ * 通用数字输入验证函数，限制范围在0-99999之间
+ * @param {Object} event - 输入事件对象
+ * @param {String} field - 字段名
+ * @param {Boolean} allowDecimal - 是否允许小数，默认false
+ */
+const validateNumberInput = (event, field, allowDecimal = false) => {
+    let value = event.detail.value
+
+    // 只保留数字和小数点（如果允许），删除其他字符
+    if (allowDecimal) {
+        value = value.replace(/[^0-9.]/g, '')
+        
+        // 防止多个小数点，只保留第一个小数点
+        const dotIndex = value.indexOf('.')
+        if (dotIndex !== -1) {
+            value = value.substring(0, dotIndex + 1) + value.substring(dotIndex + 1).replace(/\./g, '')
+        }
+        
+        // 防止以小数点开头
+        if (value.startsWith('.')) {
+            value = '0' + value
+        }
+    } else {
+        // 只允许整数
+        value = value.replace(/[^0-9]/g, '')
+    }
+
+    // 限制范围在0-99999之间
+    const numValue = parseFloat(value)
+    if (numValue > 99999) {
+        value = '99999'
+    }
+
+    // 使用 nextTick 确保视图更新
+    Taro.nextTick(() => {
+        formData[field] = value
+    })
+}
+
+/**
+ * 校验续航里程输入，只允许整数，范围0-99999
+ * @param {Object} event - 输入事件对象
+ */
+const validateRangeInput = (event) => {
+    validateNumberInput(event, 'range_km', false)
+}
+
+/**
+ * 校验最高时速输入，只允许整数，范围0-99999
+ * @param {Object} event - 输入事件对象
+ */
+const validateMaxSpeedInput = (event) => {
+    validateNumberInput(event, 'max_speed_kmh', false)
+}
+
+/**
  * 加载品牌型号数据
  */
 const loadBrandsModels = async () => {