百度小程序金额输入框校验组件

标题
swan文件

<input 
  name="{{nameStr}}"
  value="{=value=}" 
  bindinput="vChange"
  bindblur="vBlur"
  maxlength="{{maxLength}}"
  placeholder="{{placeholder}}"
  placeholder-style="{{holderStyle}}"
  type="digit"
  style="{{styleStr}}" />

js文件

Component({
  properties: {
    placeholder: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（必填）
      observer(newVal, oldVal) {
        // 属性被改变时执行的函数（可选）
      }
    },
    styleStr: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（必填）
    },
    holderStyle: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（必填）
    },
    nameStr: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（必填）
    },
    max: { // 属性名
      type: Number, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: -1, // 属性初始值（必填）
    },
    min: { // 属性名
      type: Number, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: 0.00, // 属性初始值（必填）
    },
    forcevalue: { // 属性名
      type: Number, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '0.00', // 属性初始值（必填）
      observer(newVal, oldVal) {
        // 属性被改变时执行的函数（可选）
        if (newVal > 0) {
          this.setData({ value: newVal });
        }
      }
    },
  },
  options: {
    addGlobalClass: true,
  },

  data: { // 私有数据，可用于模版渲染
    value: '',
    maxLength: -1,
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() {
    console.log('attached max = ', this.data.max);
  },

  detached: function() {},
  emitMoney(value, valid) {
    this.triggerEvent('moneyevt', {
      value,
      valid
    });
  },
  emitMoneyBlur(value) {
    this.triggerEvent('moneyblurevt', { value });
  },
  methods: {
    vBlur({ detail: { value: v } }) {
      if (v) {
        v = parseFloat(v).toFixed(2);
        console.log('blur v = ', v);
        this.setData({ value: v });
        this.emitMoneyBlur(v);
      }
    },
    vChange({ detail: { value: v } }) {
      const MoneyTest = /^\d+(\.\d{1,2})?$/;
      const count = v.length,
        subv = v.substring(0, count - 1);
      const { max, min } = this.data;
      console.log('v = ', v);
      if (!v || parseFloat(v) == 0) {
        // 空 或 0 处理
        if (v[count - 1] === "." && subv.indexOf(".") > -1) {
          this.setData({ value: subv });
          this.emitMoney(subv, false);
          return;
        }
        this.emitMoney(v, false);
        return;
      }

      if (v[count - 1] === ".") {
        if (subv.indexOf(".") > -1) {
          // 之前有一个点
          // this.value = subv;
          this.setData({ value: subv });
          this.emitMoney(subv, undefined);
          return subv;
        } else {
          let num = v;
          if (count === 1) {
            num = "0.";
          }
          // this.value = num;
          this.setData({ value: num });
          this.emitMoney(num, false);
          return num;
        }
      } else {
        // 输入数字
        if (/\.\d{3,}$/.test(v)) {
          // 小数部分不合法
          let tmp = subv;
          while (/\.\d{3,}$/.test(tmp)) {
            tmp = tmp.substring(0, tmp.length - 1);
          }
          // this.value = tmp;
          this.setData({ value: tmp });
          this.emitMoney(tmp, true);
          return tmp;
        } else if (v < min * 1) {
          this.setData({ value: min });
          this.emitMoney(min, true);
          return;
        } else if (max > -1 && v > max * 1) {
          this.setData({ value: max });
          this.emitMoney(max, true);
          return max;
        } else {
          console.log('进入 else = ', v);
          this.setData({ value: v });
          this.emitMoney(v, true);
          return v;
        }
      }
    },
  }
});