van-field判断数字大于10小于100,保留2位小数点。

<van-field>判断数字大于10小于100,保留2位小数点。建议使用 :formatter 代替 @input=“numberFixedDigit”。

方法一:使用@input=“numberFixedDigit”。

这种方式不建议。因为@input是实时校验的,体验不好。 建议是onBlur的时候,才去校验。

<van-field
        v-model="curValue"
        label="充值金额"
        placeholder="请输入充值金额"
        type="number"
        input-align="right"
        @input="numberFixedDigit"
    />
/**
 * 格式化输入金额
 * @param e
 */
function numberFixedDigit(e) {
  e.target.value = e.target.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
  e.target.value = e.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
  e.target.value = e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
  e.target.value = e.target.value.replace(/^\./g, ''); //首位不能输入“.”
  if (e.target.value.indexOf(".") < 0 && e.target.value != "") {//如果没有小数点,首位不能为0,如01、02...
    e.target.value = parseFloat(e.target.value);
  }
  nextTick(() => {
    curValue.value = e.target.value
  })
}

方法二:建议使用:formatter=”myFormatter”

格式化输入内容

通过 formatter 属性可以对输入的内容进行格式化,通过 format-trigger 属性可以指定执行格式化的时机,默认在输入时进行格式化。

<van-field
  v-model="value1"
  label="文本"
  :formatter="formatter"
  placeholder="在输入时执行格式化"
/>
<van-field
  v-model="value2"
  label="文本"
  :formatter="formatter"
  format-trigger="onBlur"
  placeholder="在失焦时执行格式化"
/>
export default {
  data() {
    return {
      value1: '',
      value2: '',
    };
  },
  methods: {
    formatter(value) {
      // 过滤输入的数字
      return value.replace(/\d/g, '');
    },
  },
};

注意: format-trigger="onBlur" 在失去焦点时才执行格式化。

<van-field :formatter="myFormatter" format-trigger="onBlur" v-model="myVal">

myFormatter(value) {
  value = value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
  value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
  value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
  value = value.replace(/^\./g, ''); //首位不能输入“.”
  if (value.indexOf(".") < 0 && value != "") {//如果没有小数点,首位不能为0,如01、02...
    value = parseFloat(value);
  }
  if (parseFloat(value) < 10 || parseFloat(value) >= 100) {
     this.$message.error({ message: '需要大于等于10,且小于100'});
     this.$nextTick(() => {
           this.myVal = "";
     });
     return;
  }
  // 注意::formatter需要最终return value。
  return value;
}

用:formatter的好处是可以在onBlur失去焦点的时候才执行格式化。

请登录后发表评论

    没有回复内容