1. 程式人生 > >百度小程式金額輸入框校驗元件

百度小程式金額輸入框校驗元件

標題
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;
        }
      }
    },
  }
});