在我们的项目中使用的 VantUI, 因为封装的输入框 (文字, 数字) 都是用的 van-field. 但是项目需求是对输入金额时做一定对限制:
(1). 第一位只能输入数字;
(2). 只能输入一个小数点及后面一位;
实现方法:
1.JS 方法限制
- /**
- * 输入金额控制
- */
- export function numberCheck (val) {
- var str = val;
- var len1 = str.substr(0, 1);
- var len2 = str.substr(1, 1);
- // 如果第一位是 0, 第二位不是点, 就用数字把点替换掉
- if (str.length> 1 && len1 == 0 && len2 != ".") {
- str = str.substr(1, 1);
- }
- // 第一位不能是.
- if (len1 == ".") {
- str = "";
- }
- // 限制只能输入一个小数点
- if (str.indexOf(".") != -1) {
- var str_ = str.substr(str.indexOf(".") + 1);
- if (str_.indexOf(".") != -1) {
- str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
- }
- }
- // 正则替换, 保留数字和小数点
- str = (str.match(/^\d*(\.?\d{0,1})/g)[0]) || null
- return str;
- }
2. 引入 van-field
<van-field :key="index" v-model="value" @input="onClickInputKeyBoard()"> </van-field>
引入 JS
- // 判断价格控制
- onClickInputKeyBoard(){
- value = numberCheck(value)
- },
来源: http://www.jianshu.com/p/b7ea9fd2fb28