uniapp小程序金额输入框限制

最新推荐文章于 2024-08-05 19:34:03 发布

数字浪儿

最新推荐文章于 2024-08-05 19:34:03 发布

阅读量381

点赞数 3

分类专栏：微信小程序文章标签： uni-app 小程序 javascript

本文链接：https://blog.csdn.net/weixin_45128657/article/details/136336529

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该篇文章介绍了如何在Vue.js应用中使用模板和方法实现金额输入框的验证，包括数字格式检查和去除无效前导零。作者展示了如何使用正则表达式限制输入格式，并在用户输入后进行实时更新。

摘要由CSDN通过智能技术生成

<template>
  <view style="padding: 200rpx">
    <input
      v-model="money"
      type="number"
      @input="check"
      placeholder="金额(元)"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      money: "",
    };
  },
  methods: {
    check: function (e) {
      //正则表达试
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
		if((e.target.value + '').startsWith("00")){
			e.target.value = 0
		}
      //重新赋值给input
      this.$nextTick(() => {
        this.money = e.target.value;
      });
    },
  },
};
</script>