vue表单校验限制输入数字后小数点两位（包括避开通过中文输入法的那些坑）

Z时代
2024-01-10
分类：综合

vue

<el-form-item label="海运运费系数">
              <el-input
                v-model.trim="ruleForm.oceanFreightCoefficient"
                maxlength="8"
                @keyup.native="ruleForm.oceanFreightCoefficient=oninput(ruleForm.oceanFreightCoefficient)"
                @change="ruleForm.oceanFreightCoefficient=oninput(ruleForm.oceanFreightCoefficient)"
              ></el-input>&nbsp;&nbsp;
              <span>元/千克</span>
 </el-form-item>

oninput(num) {
          console.log(num)
            var str = num
            var len1 = str.substr(0, 1)
            var len2 = str.substr(1, 1)
            var lenLast=str.substr(str.length-1)
            //如果第一位是0，第二位不是点，就用数字把点替换掉
            if (str.length > 1 && len1 == 0 && len2 != ".") {
                str = str.substr(1, 1)
            }
            //第一位不能是.
            if (len1 == ".") {
                str = ""
            }
            //最后一位不能是.
            if (str.length==8&&lenLast == ".") {
                str = ""
            }
            //限制只能输入一个小数点
            if (str.indexOf(".") != -1) {
                var str_ = str.substr(str.indexOf(".") + 1)
                if (str_.indexOf(".") != -1) {
                    str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
                }
            }
            //正则替换
            str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
            str = str.replace(/\.\d\d\d$/,'') // 小数点后只能输两位
            return str
}