美文网首页WEB前端程序开发码农的世界Vue.js的学习过程与心得
对input进行输入金额控制(保留小数点后一位)

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

作者: honey缘木鱼 | 来源:发表于2019-09-18 19:36 被阅读0次

    在我们的项目中使用的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>
    
    1. 引入js
         //判断价格控制
    onClickInputKeyBoard(){
        value = numberCheck(value)
     },
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/oywkuctx.html