前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >对input进行输入金额控制(保留小数点后一位)

对input进行输入金额控制(保留小数点后一位)

作者头像
honey缘木鱼
发布2019-09-19 19:03:42
5.5K0
发布2019-09-19 19:03:42
举报
文章被收录于专栏:娱乐心理测试娱乐心理测试

在我们的项目中使用的VantUI,因为封装的输入框(文字,数字)都是用的van-field。但是项目需求是对输入金额时做一定对限制: (1).第一位只能输入数字; (2).只能输入一个小数点及后面一位;

实现方法: 1.js方法限制

代码语言:javascript
复制
/**
 * 输入金额控制
 */
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

代码语言:javascript
复制
<van-field :key="index"  v-model="value" @input="onClickInputKeyBoard()"> </van-field>
  1. 引入js
代码语言:javascript
复制
     //判断价格控制
onClickInputKeyBoard(){
    value = numberCheck(value)
 },
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.09.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档