共计 734 个字符,预计需要花费 2 分钟才能阅读完成。
应用场景
在编写输入金额的输入组件 input
时,虽然能够设置 type
为number
,但却不能够自动检验用户输入的值是否符合金额的格式。比如,用户能够同时输入两个小数点。本文章以此为大前提展开略浅的技巧。
过程解析
原始状态
说到校验,第一个想到的就是用 正则表达式。以微信小程序为例。
DOM 结构
...
<input type='digit' value='{{value}}' bindinput='numChange' />
...
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 : '';
},
...
用过都说好!
最后,嘻嘻!
正文完
发表至: javascript
2019-07-14