vue框架下，移动端input控制输入，只能输入负数、小数或整数，正则表达式匹配

Question

小白试了好多方法都不可以，onkeyup,oninput,v-on:input什么的都试过了，大神救命啊啊啊。。。

<!--这个方法，电脑端可以控制只能输入负号数字和小数点,手机端就不行了什么都可以输入-->
<input type="number" oninput="this.value=this.value.replace(/[^0-9|^\\-|^\\.]/g,\'\').slice(0,11);" v-model="num"/>

<!--这个方法，电脑端、手机端就可以控制只能输入数字和小数点，但是负号不能输入，主要是我不知道怎么写正则-->
<input type="number" oninput="this.value=(this.value.replace(/[^0-9.]+/,'')).slice(0,11);" v-model="num"/>

是不是输入监听的问题，大家的正则我都试了，但是依然输入不了负号。。。。

Answer 1

html部分

<input v-model="checkNum" ref="input"/>

js部分

data () {
  return {
    num: 0,
    reg: /^-$|^-?\d+(\.\d+)?$/
  }
},
computed: {
  checkNum: {
    get () {
      return this.num
    },
    set (val) {
      if (this.reg.exec(val)) {
        this.$refs.input.value = val
      } else {
        val = val.substring(0, val.length - 1)
        this.$refs.input.value = val
      }
      this.num = val
    }
  }
},

正则部分参考了楼上的写法，input建议不要使用number类型，因为number类型有很多格式检测方面不便利的问题，比如maxlength不起作用，要自己写js判断maxlength

Answer 2

/\-?\d+\.?\d+/

console.log("-0.5".match(/\-?\d+\.?\d+/));  // [ "-0.5" ]
console.log("dfs-0.5df5dsf".replace(/[^(\-?\d+\.?\d+)]/g,""));  //-0.55
console.log(/^\-?\d+\.?\d+$/.test("-0.5"));  //true

Answer 3

/-?\d+(\.\d+)?/g

Answer 4

  /**
   * <input v-d1 v-model="num" />
   */
  Vue.directive('d1', {
    bind: function (el, binding, vnode) {
      el.$handler = function (e) {
        const val = el.value
        const reg = new RegExp('')

        if (val && !reg.test(val)) {
          el.value = val.replace(...)
          el.dispatchEvent(new Event('input', { bubbles: true }))
        }
      }

      el.addEventListener('input', el.$handler)
    },
    unbind: function (el, binding, vnode) {
      el.removeEventListener('input', el.$handler)
    }
  })

Answer 5

number 换成 tel 就好了