el表达式最两位小数点

 
<fmt:formatNumber value="${85157874.005575/1024/1024}" pattern="#,###.##" />


记得要导入 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
el-input中限制小数点输入两位,有以下几种实现方法: ### 方法一:使用`onkeyup`事件结合正则表达式el-input上绑定`onkeyup`事件,通过正则表达式匹配输入内容,只保留数字和两位小数,并触发`input`事件更新`v-model`绑定的值。示例代码如下: ```vue <el-form-item label="价格" prop="price"> <el-input v-model="materialTSCLForm.price" onkeyup="this.value=this.value.match(/\d+\.?\d{0,2}/);this.dispatchEvent(new Event('input'))"></el-input> </el-form-item> ``` 这里在输入框输入时,会实时将输入内容转换为符合`\d+\.?\d{0,2}`正则规则的内容,即数字且小数点两位[^2]。 ### 方法二:自定义`@keyup.native`事件处理函数 在el-input上绑定`@keyup.native`事件,调用自定义的`oninput`方法,对输入内容进行处理。示例代码如下: ```vue <el-input v-model="value" @keyup.native="value = oninput(value)"></el-input> <script> export default { data () { return { value: '' } }, methods: { oninput(num) { var str = num var len1 = str.substr(0, 1) var len2 = str.substr(1, 1) // 如果第一位是0,第二位不是点,就用数字把点替换掉 if (str.length > 1 && len1 == 0 && len2 != ".") { str = str.substr(1, 1) } // 第一位不能是. if (len1 == ".") { 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 } } } </script> ``` 此方法在输入过程中,对输入内容进行了多种规则的校验,确保输入为正数且小数点两位[^3]。 ### 方法三:封装通用的`oninput`方法 同样使用`@keyup.native`事件绑定自定义方法,不过该方法可以传入限制的小数位数。示例代码如下: ```vue <el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input> <script> export default { data () { return { value: '' } }, methods: { oninput(val, limit = 0) { val = val.replace(/[^\d.]/g, ""); // 保留数字 val = val.replace(/^00/, "0."); // 开头不能有两个0 val = val.replace(/^\./g, "0."); // 开头为小数点转换为0. val = val.replace(/\.{2,}/g, "."); // 两个以上的小数点转换成一个 val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 只保留一个小数点 /^0\d+/.test(val) ? val = val.slice(1) : ''; // 两位以上数字开头不能为0 const str = '^(\\d+)\\.(\\d{' + limit + '}).*$' const reg = new RegExp(str) if (limit === 0) { // 不需要小数点 val = val.replace(reg, '$1') } else { // 通过正则保留小数点后指定的位数 val = val.replace(reg, '$1.$2') } return val } } } </script> ``` 该方法将小数位数限制作为参数传入,可灵活控制保留的小数位数,这里传入`2`表示保留两位小数[^4]。 ### 方法四:使用`change`事件截取 在el-input上绑定`change`事件,在输入值改变时,对输入内容进行截取处理。示例代码如下: ```vue <el-form-item label="金额" prop="status"> <el-input size="small" type="number" clearable style="width: 160px" v-model="AddRemObjFrom.Dids_Amount" @change="checkPrice()" placeholder="请输入内容">金额</el-input> </el-form-item> <script> export default { data () { return { AddRemObjFrom: { Dids_Amount: '' } } }, methods: { checkPrice() { if (this.AddRemObjFrom.Dids_Amount.indexOf('.') >= 0) { this.AddRemObjFrom.Dids_Amount = this.AddRemObjFrom.Dids_Amount.substring(0, this.AddRemObjFrom.Dids_Amount.indexOf('.') + 3); } } } } </script> ``` 当输入值发生变化时,检查是否包含小数点,如果包含则截取小数点两位的内容[^1]。 ### 方法五:在`changeInput`方法中处理 在输入框输入值改变时,通过`changeInput`方法对输入内容进行处理。示例代码如下: ```vue <el-input v-model="inputValue" @change="changeInput"></el-input> <script> export default { data () { return { inputValue: '' } }, methods: { changeInput(e) { if (e.target.value.indexOf('.') >= 0) { e.target.value = e.target.value.substring(0, e.target.value.indexOf('.') + 3); } } } } </script> ``` 此方法在输入值改变时,检查输入值中是否有小数点,若有则截取小数点两位的内容[^5]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值