百度小程式金額輸入框校驗元件
阿新 • • 發佈:2018-11-09
標題
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; } } }, } });