1. 只能输入数字/小数点/负号
2. 只能有一个负号， 只能有一个小数点
3. 第一位不能直接输入小数点，输入负号后不能直接跟随小数点
4. 第一位输入为0时或-0时，只能跟随小数点，不能跟随数字 例如01 09
5. 小数点后只能输入两位数字，不可输入其他，并且最后一位不能为0
6 . 因为是实时校验 如果用户想表示0 直接输入0即可 没必要输入0.00 如果输入0.0以后 那么必定有值 ，最少为0.01
但是没办法控制用户输入0.0 因为用户可能输入0.01 ， 用户输入0.0 需要后面点击确定或者其他方法校验输入框内容了
主要是用户输入错误不符合规则的内容 会被直接截取删除 实际给用户展示 就是输入错误的没有反应
<template>
<div class="layout-main-conent">
<a-input
v-model:value="values"
placeholder="Basic usage"
@input="handleInput"
></a-input>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const values = ref('')
const handleInput = (event) => {
let value = event.target.value
console.log('value', value)
value = value.replace(/[^0-9.|-]/g, '')
if (value.indexOf('-') > 0) {
value =
value.slice(0, value.indexOf('-')) + value.slice(value.indexOf('-') + 1)
}
// 第一位不能是小数点
if (value.indexOf('.') === 0) {
value = value.slice(1)
}
// -负数后面不能直接跟随小数点
if (value.indexOf('-.') === 0) {
value = value.slice(0, 1)
}
// 负数-0后面只能跟随小数点
if (value.indexOf('-0') === 0) {
if (value.indexOf('.') !== 2) {
value = value.slice(0, 2)
}
}
// 正数0后面只能跟随小数点
if (value.indexOf(0) === 0) {
if (value.indexOf('.') !== 1) {
value = value.slice(0, 1)
}
}
if (value.split('-').length - 1 > 1) {
value = value.slice(0, value.indexOf('-', value.indexOf('-') + 1))
}
if (value.split('.').length - 1 > 1) {
value = value.slice(0, value.indexOf('-', value.indexOf('.') + 1))
}
// 最多两位小数
// 两位小数的最后一位不能是0
const parts = value.split('.')
if (parts.length > 1 && parts[1].length > 1) {
if (parts[1].charAt(1) === '0') {
value = parts[0] + '.' + parts[1].slice(0,1)
} else {
value = parts[0] + '.' + parts[1].slice(0, 2)
}
}
values.value = value
}
</script>