Vue中结合ElementUI实现：限制输入框只能输入正整数

input中禁止输入小数和负数（只允许输入正整数）

做法一：利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的

<el-input type="number" v-model="ruleForm.applyNums" placeholder="请输入.." @keyup.native="proving1($event)" min="1"></el-input>

1.首先要监听keyup（键盘按下）事件，因为element ui的组件都是在外层加一层div，所以可能会报错，所以要在加一个vue事件的修饰符.native，代表原生事件。
2.然后传个$event对象进去获取原生的DOM（用以触发事件本身）
3.接下来就是在methods中写函数。

proving1(e) {
  var keynum = window.event ? e.keyCode : e.which;   //获取键盘码
  var keychar = String.fromCharCode(keynum);  //获取键盘码对应的字符
  if (keynum ==189|| keynum==190||keynum == 109) {
    this.$message.warning('禁止输入小数以及负数')
    e.target.value = ' '
  }
}

做法二：利用正则来规避小数点和负数

<el-input type="number" v-model="ruleForm.appliedNums" @blur="BlurText($event)" min="1"></el-input>

1.在这里使用的是element ui 的事件，监听失去焦点事件触发时要调用的事件，同时传$event参数
2.在methods中编写函数

  BlurText(e) {
    let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value)
    if(!boolean) {
      this.$message.warn('请输入正整数')
      e.target.value = ' '
    }
  }

这里使用的正则的意思代表的是（会正则的大佬就可以省略啦或者帮小弟看看不足之处）：
首先我们先看开头的^和结尾的$这里分别代表匹配字符串的开头以及匹配字符串的结尾，而[1-9]是代表的是匹配1-9其中的数字，所以会过滤掉负数和小数，同时要求开头必须要以1开头，后面的则是匹配以0-9结尾的数字，而*代表的是0次或多次，也就是不限制结尾的数字，合起来的意思就是：我们匹配从1-9中的某个数开头，并且以0-9中的某个数结尾的匹配。最后呢就是做的判断了，如果符合我们所定义的正则就不用提示错误了，如果不符合呢，就会提示错误，同时清空数据.

做法三：利用ES6语法includes来规筛掉 . 和 -

1.获取输入框的值，对输入框内容进行检索

  var inputText = document.querySelector('#inputText')
  inputText.addEventListener('input',  function() {
    if(this.value.includes('.')){
      console.log('不能输入小数点')
    }else if (this.value.includes('-')){
      console.log('不能输入负数')
    }else{
      console.log('正常')
    }

做法四：利用正则匹配出 . 或者 -

方法和方法二一样，但正则表达式则是：/^\d+\.\d$/

let regx = /^\d+\.\d+$/;
let num_two = 1.252;
const newNum_two = regx.test(num_two)
console.log(newNum_two)

解释：

`/^d+`：以任意一个数字开头 +：出现一次或多次
`\.`：第二位为小数点
`\d+$` ：以任意一个数字结尾并且出现一次或多次

let regx = /^\d+\.\d+$/;
let num_two = 1.252;
const newNum_two = regx.test(num_two)
console.log(newNum_two)

`/^\-`：以 - 号 开头
`\d`：第二位肯定是个数字
`\.`：第三位可能会出现0次或者1次的 .
`\d*` 以数字 结尾出现0次或多次（这样就可以如果输入的单单是-2的话，也能匹配到）

最后编辑于：2019.11.07 17:50:52