JavaScriptテクニックの共有-純粋な数値(小数点付き)フィルタリング
1151 ワード
シーンの適用
入力金額の入力モジュール
プロセス解析
元の状態
検証といえば、最初に思いついたのは正規表現です.微信ウィジェットを例に挙げます.
DOM構造
JavaScriptロジック
空でないデータを取得し、データ型を変換
フィルタリング後、返されるデータ型は文字列なので、使用時にデータ型を再変換する必要があります.
使ったことがあってもいいですよ.
最後に、ヒヒ!
入力金額の入力モジュール
inputを作成する場合、typeをnumberとすることは可能であるが、ユーザが入力した値が金額のフォーマットに合致するか否かを自動的にチェックすることはできない.例えば、ユーザは、2つの小数点を同時に入力することができる.この文章はこれを大前提に少し浅いテクニックを展開します.プロセス解析
元の状態
検証といえば、最初に思いついたのは正規表現です.微信ウィジェットを例に挙げます.
DOM構造
...
...JavaScriptロジック
...
numChange(e) {
//
const NEXT = e.detail.value;
let currentValue = this.data.value;
const NEW_VALUE = this.numCheck(currentValue, NEXT);
this.setData({
value: NEW_VALUE || currentValue;
})
},
numCheck(prev, next) {
//
//
if (next && !/^(([1-9]\d*)|0)(\.\d{0,2}?)?$/.test(next)) {
if (next === '.') return '0.';
return prev;
}
return next;
}
...空でないデータを取得し、データ型を変換
フィルタリング後、返されるデータ型は文字列なので、使用時にデータ型を再変換する必要があります.
...
getPureMoney() {
// （ ）
const { value } = this.data;
const PARSE_VALUE = parseFloat(value);
return !isNaN(PARSE_VALUE) ? PARSE_VALUE : '';
},
...使ったことがあってもいいですよ.
最後に、ヒヒ!