vue實現表單輸入框數字類型校驗功能
1. 樣式代碼
<el-form-item label="訂單總價"><el-input size="small" v-model="form.totalPrice" placeholder="請輸入訂單總價 正整數或者2位數小數" @input="check(form.totalPrice)"></el-input>
</el-form-item>
在HTML表單里使用 input事件來監聽輸入值的變化，一單數據變化，就觸發校驗規則。輸入框輸入的類型 都是字符串類型，要把字符串轉換成數字類型。
在HTML中，無論是原生的input元素還是Element UI的el-input組件，當用戶在輸入框中輸入數字時，這些輸入值默認會被當作字符串類型處理。
2 methods 正則表達式校驗輸入的值
//正則表達式校驗訂單價格輸入的值
check(value) {const Regex = /^\d+(\.\d{1,2})?$/;if (!Regex.test(value)) {this.$notify.warning("訂單總價請輸入正整數或者2位數小數")}
},
但是 監聽校驗 只是對輸入值校驗，如果用戶不聽提示，執意提交非數字類型的，還是能提交到后臺，導致后臺因為字段類型不同而報錯。
所以input事件校驗可以不要。
報錯信息如下：
JSON parse error: Cannot deserialize value of type `java.lang.Double` from String "十": not a valid Double value; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type `java.lang.Double` from String "十": not a valid Double value
3 提交訂單時 再校驗 如果校驗不通過不允許提交表單
3.1 使用vue方法校驗
在methods 提交表單的函數，在調后端接口前做校驗
save(){
let b = this.checkDataType(Number(this.form.totalPrice));if (!b) {this.$notify.warning("訂單總價輸入的不是數字，請輸入數字")return;}
//下面調接口提交表單 省略
}
下面的方法復制到methods 用于校驗一個變量是否是數字類型，如果是非數字會返回false，如果是小數或者整數返回true
//校驗訂單總價輸入的類型
checkDataType(variable) {if (typeof variable === 'number') {return Number.isInteger(variable) || Number.isFinite(variable) && variable % 1 !== 0;} else {return false;}
},
3.2 再次使用正則表達式校驗
所以input事件校驗可以不要，但是提交時的校驗一定要有，這樣才能保證前端傳到后臺的數據跟實體類的字段類型一致的。
save(){let b = this.check(this.form.totalPrice);if (!b) {this.$notify.warning("訂單總價輸入的不是數字，請輸入數字")return;}
}//正則表達式校驗訂單價格輸入的值
check(value) {const Regex = /^\d+(\.\d{1,2})?$/;if (Regex.test(value)) {return true} else {return false}
},
其他方法：
1.v-model.number
elmentUI 提供的數字字符串轉換為數字類型，以下是一個使用Element UI的el-input組件并轉換輸入值為數字類型的示例：
html<template><el-form><el-form-item label="輸入框"><el-input v-model.number="inputValue" @input="handleInput"></el-input></el-form-item></el-form>
</template>
但是，使用方式時，無法輸入小數點。可能是我方式不對，鐵們，可以嘗試一下這種，這種可以的話是比價簡單的。
2.InputNumber 計數器
在Element UI中，el-input-number組件是一個專門用于輸入和顯示數字的計數器。它提供了對數字輸入的內置驗證和控制，包括限制輸入范圍、步長等。
:precision=“2” precision 的值必須是一個非負整數，并且不能小于 step 的小數位數。調整精度位數
:step=“0.1” 點擊加減符號時增減的數值
<template><el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>
<script>export default {data() {return {num: 1}}};
</script>
后端數據類型的獲取和校驗
前端比較校驗傳過來的數據必須是數字類型，才不會報錯。不然雖然后端加上校驗代碼也是會報錯的的。
這是因為 前端調用接口時，把數據傳到后端Spring MVC框架會嘗試將請求參數轉換為相應的方法參數類型。如果數據類型不匹配或無法轉換，Spring會拋出MethodArgumentTypeMismatchException異常。
但這并不意味著后端可以完全依賴于這種自動類型轉換和異常處理來進行數據校驗。因為用戶可能繞過前端校驗直接向后端發送請求。因此，后端需要進行數據校驗以確保接收到的數據是合法和安全的。
//校驗訂單總價輸入的必須是正整數或者正小數類型
Class<PurchaseOrder> purchaseOrderClass = PurchaseOrder.class;
Field totalPriceField = purchaseOrderClass.getDeclaredField("totalPrice");
Class<?> type = totalPriceField.getType();
if (!(type.equals(Integer.class) || type.equals(Double.class))){throw new CustomException("-1","訂單總價請輸入正整數或者小數數字");
}
