element ui input输入框仅支持输入正负数和小数(正则)

背景:在input输入框中只能输入负号- 和小数点.还有数字1-9

           字母等其他符号不允许输入

想法:       1.找遍了正则表达以上需求的,但是没有一个实现的,主要就是负号比较难搞,小数点的正则倒是可以。

比如这个正则:/\-?[0-9]{1,2}\.?[\d]{0,3}/,我觉得是可以的,但是就是检测不到负号.....

                    2.<el-input v-module="xxx"></el-input>中的v-module不支持.number修饰符

                    3.<el-input v-module="xxx" type="number"></el-input>输入框会显示步进器,而且字母e E会编译为数字显示出来

最终方法:利用match函数(检测负号)+正则表达式(检测整数和小数)

                  match函数:

 有兴趣的可以去仔细看一下:JavaScript match() 方法 | 菜鸟教程


<el-input v-model="params.scoreBegin" style="width: 45%;" placeholder="请输入1-100的数字" @input="limit100($event, 'scoreBegin')"></el-input>




//用来检索整数且不超过三位数
const limit100 = /[0-9]{1,3}/ 
/用来检索小数且小数点后不超过三位数
const limit100dot = /[0-9]{1,2}.[\d]{0,3}/

    limit100(new_v, item) {
      if (new_v) {
        new_v = new_v + "";
        let nn = "";
        // 正负判断
        if (new_v.match('-')) {
          nn=new_v.match('-')[0]
        }
        // 小数判断
        if (new_v.indexOf('.') != -1) {
          if (new_v.match(limit100dot)) {
            nn = nn+new_v.match(limit100dot)[0] || '';
          }
        } else {
          if (new_v.match(limit100)) {
            nn =nn+ new_v.match(limit100)[0] || '';
          }
        }
        // 限制数字最大为100
        if (parseFloat(nn) > 100) nn = 100;
        this.params[item] = nn;
      }
    },

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值