需求：想要實現一個輸入金額的el-input，限制只能輸入數字和一個小數點。失焦數字轉千分位，聚焦轉為數字，超過最大值，紅字提示

效果圖

失焦

聚焦

報錯效果

// 組件limitDialog
<template><el-dialog:visible.sync="isVisible"title="修改限額"width="420px":before-close="cancel"><el-form :model="formVal" ref="ruleForm" size="small"><el-form-itemlabel="單次交易限額"prop="single_limit":rules="[{required: true,message: '請輸入單次交易限額',trigger: 'change',},{ validator: singleRule, trigger: 'change' },]"><el-inputv-model="formVal.single_limit"v-thousandmaxlength="10"type="text"@keypress.native="restrictInput('single_limit', $event)"@blur="formatOnBlur('single_limit', $event)"><template slot="suffix">{{ otherInfo.currency }}</template></el-input></el-form-item><el-form-itemlabel="每日限額"prop="daily_limit":rules="[{required: true,message: '請輸入每日限額',trigger: 'change',},{ validator: dailyRule, trigger: 'change' },]"><el-inputv-model="formVal.daily_limit"maxlength="10"v-thousandtype="text"@keypress.native="restrictInput('daily_limit', $event)"@blur="formatOnBlur('daily_limit', $event)"><template slot="suffix">{{ otherInfo.currency }}</template></el-input><p class="tip" v-if="type !== 'bath'">當日已用金額 {{ otherInfo.daily_used }}{{ otherInfo.currency }}</p></el-form-item><el-form-itemlabel="每月限額"prop="monthly_limit":rules="[{required: true,message: '請輸入每月限額',trigger: 'change',},{ validator: monthlyRule, trigger: 'change' },]"><el-inputv-model="formVal.monthly_limit"maxlength="10"v-thousandtype="text"@keypress.native="restrictInput('monthly_limit', $event)"@blur="formatOnBlur('monthly_limit', $event)"><template slot="suffix">{{ otherInfo.currency }}</template></el-input><p class="tip" v-if="type !== 'bath'">當月已用金額 {{ otherInfo.monthly_used }}{{ otherInfo.currency }}</p></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="cancel" size="small">取 消</el-button><el-buttontype="primary"@click="handleSave"size="small":loading="isSumbitLoading">確 定</el-button></div></el-dialog>
</template><script>
import { updateCardLimitApi } from "@/services/api/cardManage.js";
import { updateObject } from "@/utils/common";
export default {data() {return {isVisible: false,isSumbitLoading: false,formVal: {single_limit: "",daily_limit: "",monthly_limit: "",id: "",},otherInfo: {currency: "USD",daily_used: "",monthly_used: "",},type: "bath",};},props: {selectedList: {type: Array,default: () => [],},},methods: {singleRule(rule, value, callback) {const numValue = Number(value);if (numValue > 10000) {callback(new Error(`輸入金額不可超過單次限額(10,000.00 ${this.otherInfo.currency})`));}this.checkLimit(value, callback);},dailyRule(rule, value, callback) {const numValue = Number(value);if (numValue > 100000) {callback(new Error(`輸入金額不可超過每日限額(100,000.00 ${this.otherInfo.currency})`));}this.checkLimit(value, callback);},monthlyRule(rule, value, callback) {const numValue = Number(value);if (numValue > 500000) {callback(new Error(`輸入金額不可超過每月限額(500,000.00 ${this.otherInfo.currency})`));}this.checkLimit(value, callback);},checkLimit(value, callback) {const strValue = String(value || "");if (strValue === "")return callback(new Error("請輸入單次交易限額"));if (strValue.endsWith("."))return callback(new Error("不能以小數點結尾"));const numValue = Number(strValue);if (isNaN(numValue)) return callback(new Error("請輸入有效的數字"));if (strValue.includes(".") && strValue.split(".")[1].length > 2) {return callback(new Error("小數點后最多兩位"));}callback();},restrictInput(formKey, event) {const key = event.key;const value = String(this.formVal[formKey] || "");if (event.ctrlKey || event.altKey || key.length > 1) return;// 只允許數字和小數點，限制多個小數點const isValidKey = /[0-9.]/.test(key);const hasDecimal = value.includes(".");if (!isValidKey || (key === "." && hasDecimal)) {event.preventDefault();return;}},formatOnBlur(formKey) {const strValue = String(this.formVal[formKey] || "");if (strValue && !isNaN(Number(strValue))) {this.formVal[formKey] = Number(strValue).toFixed(2);}},init(info, type) {this.isVisible = true;this.type = type;updateObject(this.formVal, info);updateObject(this.otherInfo, info);},handleSave() {this.isSubmitLoading = true;this.$refs.ruleForm.validate(async (valid) => {if (valid) {const { code } = await updateCardLimitApi({...this.formVal,id:this.type === "bath"? this.selectedList.map((item) => item.id): [this.formVal.id],});if (code == 0) {this.$message.success("修改成功");this.cancel();this.$emit("reload");}}this.isSumbitLoading = false;});},cancel() {this.isVisible = false;this.$refs.ruleForm.resetFields();updateObject(this.formVal, {single_limit: "",daily_limit: "",monthly_limit: "",id: "",});this.otherInfo.currency = "USD";},},
};
</script><style lang="scss" scoped>
.dialog-footer {text-align: right;
}
.tip {color: #999999;font-size: 12px;
}
</style>