vue element el-input正则校验输入非价格清空输入框

梁小桐

已于 2022-11-03 10:23:53 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element 前端文章标签： vue.js elementui js

于 2022-04-28 14:06:00 首次发布

本文链接：https://blog.csdn.net/jmhaoxuan/article/details/124472518

前端同时被 2 个专栏收录

13 篇文章

订阅专栏

vue element

6 篇文章

订阅专栏

本文介绍了如何使用Vue.js结合Element UI，通过正则表达式实现输入框仅允许输入价格格式的数据。当输入以00开始时自动转换为0.，以.开始时同样转换为0.，并限制输入的格式，确保只保留一位小数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+element el-input输入非价格则清空输入框，正则校验输入内容：

1、如果是（00）开头则自动转为（0.）

2、如果（.）开头则转为（0.）


<el-table-column label="单价" align="center">
  <template slot-scope="scope">
    <el-input onkeyup="this.value=this.value.replace(/[^\d.]/g,'').replace(/^00/, '0.')
.replace(/^\./g, '0.').replace(/\.{2,}/g, '.').replace('.', '$#$')
.replace(/\./g, '').replace('$#$', '.');"
@blur="scope.row.price= $event.target.value"
v-model="scope.row.price" placeholder="单价">
    </el-input>
  </template>
</el-table-column>

结果图例：