前端输入框要求输入数字及两位小数

开发中要求金钱输入框输入数字及两位小数

<input
  v-model="price"
  @input="handleInputPrice($event)"
  placeholder="0.00"
  type="text"
/>

methods方法中

handleInputPrice(e) {
  let num = "" + e.target.value;
      num = num
		     .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
		
		     .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
		
		     .replace(/^\./g, "") // 保证第一个为数字而不是.
		
		     .replace(".", "$#$")
		
		     .replace(/\./g, "")
		
		     .replace("$#$", ".");
      if (num.indexOf(".") < 0 && num !== "") {
        num = parseFloat(num) + "";
      } else if (num.indexOf(".") >= 0) {
        num = num.replace(/^()*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
      }
      e.target.value = num;
},

记录，借鉴博客http://www.manongjc.com/detail/26-hyngffqefuqavva.html
input=number 在火狐浏览器存在兼容性问题所以切记，使用text属性