uniapp如何验证输入金额为最多2位小数

发布时间 2023-11-26 06:59:21作者: dmyi

1. 在输入框的change事件中添加验证逻辑:

<template>
  <view>
    <input type="number" v-model="amount" @change="validateAmount" />
  </view>
</template>

2. 在methods中定义validateAmount方法,使用正则表达式验证输入金额是否为最多2位小数:

<script>
export default {
data() {
  return {
    amount: '', // 输入金额的值
  };
},
methods: {
  validateAmount() {
    // 使用正则表达式验证输入金额是否为最多2位小数
    const reg = /^\d+(\.\d{0,2})?$/;
    if (!reg.test(this.amount)) {
    // 如果不符合要求,弹出提示信息并清空输入框的值
    this.showToast('请输入最多2位小数的金额');
    this.amount = '';
    }
  },
  showToast(msg) {
    // 显示提示信息的函数,可以根据实际需求进行修改
    uni.showToast({
      title: msg,
      icon: 'none',
      duration: 2000,
    });
  },
 },
};
</script>