hookehuyr

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

实现通用数字输入验证函数 validateNumberInput,限制输入范围为0-99999,可选择是否允许小数
将验证函数应用于价格、里程、时速等表单字段,移除myAuthCar页面中注释的价格显示代码
<!--
* @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"
......
......@@ -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"
input-align="right">
<nut-input v-model="formData.battery_capacity_ah" placeholder="请输入" type="number" input-align="right" @input="validateBatteryCapacityInput">
<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 (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, '')
}
// 防止以小数点开头
if (value.startsWith('.')) {
value = '0' + value
// 限制范围在0-9999之间
const numValue = parseFloat(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('.')
if (dotIndex !== -1) {
value = value.substring(0, dotIndex + 1) + value.substring(dotIndex + 1).replace(/\./g, '')
}
/**
* 校验续航里程输入,只允许整数,范围0-99999
* @param {Object} event - 输入事件对象
*/
const validateRangeInput = (event) => {
validateNumberInput(event, 'range_km', false)
}
// 防止以小数点开头
if (value.startsWith('.')) {
value = '0' + value
}
/**
* 校验最高时速输入,只允许整数,范围0-99999
* @param {Object} event - 输入事件对象
*/
const validateMaxSpeedInput = (event) => {
validateNumberInput(event, 'max_speed_kmh', false)
}
// 使用 nextTick 确保视图更新
Taro.nextTick(() => {
formData.market_price = value
})
/**
* 校验电池容量输入,允许小数,范围0-99999
* @param {Object} event - 输入事件对象
*/
const validateBatteryCapacityInput = (event) => {
validateNumberInput(event, 'battery_capacity_ah', true)
}
/**
......
......@@ -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 () => {
......