Vue3 + TypeScript + el-input 处理金额输入（只能输入数字、负号和小数点，最多两位小数，不能0开头，不能小数点开头，只能开头输入负号，只能输入一次负号和小数点，不支持.01）

方法1：oninput 原生事件

代码：复杂的正则表达式代码

<!-- 方法1：oninput 原生事件，复杂的正则表达式代码 --> <el-input v-model="localCapitalInfo.capitalTotal" oninput="value=value.replace(/[^\d.-]/g, ``).replace(/^(-?)0+(\d)/, `$1$2`).replace(/(?!^)-/g, ``).replace(/^(-?)(\.)/, `$10.`).replace(/(\..*)\./g, `$1`).replace(/^(-?\d*\.\d{0,2}).*/g, `$1`)" clearable />

代码：易读的JavaScript代码（直接在这里写代码）

<!-- 方法1：oninput 原生事件，易读的JavaScript代码（直接在这里写代码） --> <el-input v-model="localCapitalInfo.capitalTotal" oninput=" let v = this.value; // 1. 只允许数字、小数点、负号 v = v.replace(/[^\d.-]/g, ''); // 2. 处理负号：只能出现在开头，且只出现一次 let hasNegative = false; if (v.includes('-')) { // 检查负号是否在开头 if (v[0] === '-') { hasNegative = true; // 保留开头的负号，移除其他位置的负号 v = '-' + v.slice(1).replace(/-/g, ''); } else { // 负号不在开头，移除所有负号 v = v.replace(/-/g, ''); } } // 3. 处理单独的小数点 if (v === '.') v = '0.'; if (v === '-.') v = '-0.'; // 4. 处理前导零：去除整数部分的前导零，但保留小数点和负数的情况 if (hasNegative) { // 负数情况：-0.12 应该保留为 -0.12 // 只有当负号后面有多个0，且这些0后面不是小数点时，才去除前导零 // 例如：-0123 应该变成 -123 v = v.replace(/^(-?)0+(\d)/, '$1$2'); } else { // 正数情况：0123 应该变成 123 v = v.replace(/^0+(\d)/, '$1'); } // 5. 去除多余的小数点（只保留第一个） const firstDot = v.indexOf('.'); if (firstDot !== -1) { const beforeDot = v.substring(0, firstDot + 1); const afterDot = v.substring(firstDot + 1).replace(/\./g, ''); v = beforeDot + afterDot; } // 6. 限制小数点后最多两位 const dotIndex = v.indexOf('.'); if (dotIndex !== -1) { const integerPart = v.substring(0, dotIndex); const decimalPart = v.substring(dotIndex + 1, dotIndex + 3); v = integerPart + '.' + decimalPart; } // 7. 特殊情况处理：如果只有负号或负号加0，保留它们 if (v === '-' || v === '-0') { this.value = v; return; } // 8. 处理以0开头的非小数情况 if (v.length > 1 && v[0] === '0' && v[1] !== '.') { v = v.substring(1); } this.value = v; " clearable />

代码：易读的JavaScript代码（使用常量）

1、创建常量 + 统一导出

src\constants\ExecutionCode.constants.ts

// 执行代码类常量 /** * 金额输入框数输入时执行的代码，遇到需转义的符号（如反斜杠 \）,需要使用两个反斜杠（\\）处理反斜杠（\） */ // export const TOTAL_INPUT_EXECUTED_CODE = ` // let v = this.value; // // 1. 只允许数字、小数点、负号 // v = v.replace(/[^\\d.-]/g, ''); // // 2. 处理负号：只能出现在开头，且只出现一次 // let hasNegative = false; // if (v.includes('-')) { // // 检查负号是否在开头 // if (v[0] === '-') { // hasNegative = true; // // 保留开头的负号，移除其他位置的负号 // v = '-' + v.slice(1).replace(/-/g, ''); // } else { // // 负号不在开头，移除所有负号 // v = v.replace(/-/g, ''); // } // } // // 3. 处理单独的小数点 // if (v === '.') v = '0.'; // if (v === '-.') v = '-0.'; // // 4. 处理前导零：去除整数部分的前导零，但保留小数点和负数的情况 // if (hasNegative) { // // 负数情况：-0.12 应该保留为 -0.12 // // 只有当负号后面有多个0，且这些0后面不是小数点时，才去除前导零 // // 例如：-0123 应该变成 -123 // v = v.replace(/^(-?)0+(\\d)/, '$1$2'); // } else { // // 正数情况：0123 应该变成 123 // v = v.replace(/^0+(\\d)/, '$1'); // } // // 5. 去除多余的小数点（只保留第一个） // const firstDot = v.indexOf('.'); // if (firstDot !== -1) { // const beforeDot = v.substring(0, firstDot + 1); // const afterDot = v.substring(firstDot + 1).replace(/\\./g, ''); // v = beforeDot + afterDot; // } // // 6. 限制小数点后最多两位 // const dotIndex = v.indexOf('.'); // if (dotIndex !== -1) { // const integerPart = v.substring(0, dotIndex); // const decimalPart = v.substring(dotIndex + 1, dotIndex + 3); // v = integerPart + '.' + decimalPart; // } // // 7. 特殊情况处理：如果只有负号或负号加0，保留它们 // if (v === '-' || v === '-0') { // this.value = v; // return; // } // // 8. 处理以0开头的非小数情况 // if (v.length > 1 && v[0] === '0' && v[1] !== '.') { // v = v.substring(1); // } // this.value = v; // `; /** * 金额输入框数输入时执行的代码，使用 String.raw 可以原样处理字符串，不解析转义序列，对于正则表达式，String.raw 非常有用 */ export const TOTAL_INPUT_EXECUTED_CODE = String.raw` let v = this.value; // 1. 只允许数字、小数点、负号 v = v.replace(/[^\d.-]/g, ''); // 2. 处理负号：只能出现在开头，且只出现一次 let hasNegative = false; if (v.includes('-')) { // 检查负号是否在开头 if (v[0] === '-') { hasNegative = true; // 保留开头的负号，移除其他位置的负号 v = '-' + v.slice(1).replace(/-/g, ''); } else { // 负号不在开头，移除所有负号 v = v.replace(/-/g, ''); } } // 3. 处理单独的小数点 if (v === '.') v = '0.'; if (v === '-.') v = '-0.'; // 4. 处理前导零：去除整数部分的前导零，但保留小数点和负数的情况 if (hasNegative) { // 负数情况：-0.12 应该保留为 -0.12 // 只有当负号后面有多个0，且这些0后面不是小数点时，才去除前导零 // 例如：-0123 应该变成 -123 v = v.replace(/^(-?)0+(\d)/, '$1$2'); } else { // 正数情况：0123 应该变成 123 v = v.replace(/^0+(\d)/, '$1'); } // 5. 去除多余的小数点（只保留第一个） const firstDot = v.indexOf('.'); if (firstDot !== -1) { const beforeDot = v.substring(0, firstDot + 1); const afterDot = v.substring(firstDot + 1).replace(/\./g, ''); v = beforeDot + afterDot; } // 6. 限制小数点后最多两位 const dotIndex = v.indexOf('.'); if (dotIndex !== -1) { const integerPart = v.substring(0, dotIndex); const decimalPart = v.substring(dotIndex + 1, dotIndex + 3); v = integerPart + '.' + decimalPart; } // 7. 特殊情况处理：如果只有负号或负号加0，保留它们 if (v === '-' || v === '-0') { this.value = v; return; } // 8. 处理以0开头的非小数情况 if (v.length > 1 && v[0] === '0' && v[1] !== '.') { v = v.substring(1); } this.value = v; `;

src\constants\index.ts

export * from "./ExecutionCode.constants";

2、使用常量

src\views\capital\CapitalInfo.vue

<!-- 方法1：oninput 原生事件，易读的JavaScript代码（使用常量） --> <el-input v-model="localCapitalInfo.capitalTotal" :oninput="TOTAL_INPUT_EXECUTED_CODE" clearable />

效果：支持

0

0.0

0.00

0.1

0.01

123.45

-123.45

-0.1

不支持

.1> 0.1

-.1> -0.1

.01> 0.01

-0 > -0> 应该是0

-.0> -0.0> 应该是0.0

-.00> -0.00> 应该是0.00

-.01> -0.01

<!-- 处理金额输入（只能输入数字、负号和小数点，最多两位小数，不能0开头，只能开头输入负号，只能输入一次负号和小数点），支持.01 --> <!-- 方法1：oninput 原生事件 --> <el-input v-model="localCapitalInfo.capitalTotal" oninput="value=value.replace(/[^\d.-]/g, ``).replace(/^(-?)0+(\d)/, `$1$2`).replace(/(?!^)-/g, ``).replace(/(\..*)\./g, `$1`).replace(/^(-?\d*\.\d{0,2}).*/g, `$1`)" clearable />

效果：支持

.1

-.1

.01

-0

-.0

-.00

-.01