vue中对<el-input>输入框的数据进行整数校验

本文地址:http://www.04007.cn/article/1026.html

    vue中要对一些<el-input>输入框进行数据校验，比如必须是数字，可以方便用@监听一些事件，比如keyup键盘弹起事件来重置input里面必须只是数字。如下：本文地址:http://www.04007.cn/article/1026.html,未经许可,不得转载.

#html代码
<el-form-item label="score" prop="score">
        <el-input v-model="form.score" placeholder="必须是整数" @keyup.native="checkInt"/>
</el-form-item>
<el-form-item label="age" prop="age">
        <el-input v-model="form.age" placeholder="必须是整数" @keyup.native="checkInt"/>
</el-form-item>

#JS代码部分
export default {
  ...
  methods: {
    //将获取的值进行替换去除非数字和点号
    checkInt(){
      this.form.score = this.form.score.replace(/[^\.\d]/g, '').replace('.', '');
	  this.form.age = this.form.age.replace(/[^\.\d]/g, '').replace('.', '');
    }
 }

本文地址:http://www.04007.cn/article/1026.html,未经许可,不得转载.

    在一个页面一处使用这样的方法我没有遇到问题，但当我在一个页面使用两处@keyup.native来检验两处必须是整数的时候。遇到了一点小问题。console中会出现报错Error in v-on handler: "TypeError: Cannot read property 'replace' of undefined"。在使用的时候发现首先进行第一个输入框的检验时都能正常，但首先对第二个输入框进行检测的话则之后对第二个进行测试就会报上面的错误，并且之后两边都检测之后两个又都好用。目前还未找到是什么问题，路过的老铁有碰到并解决一定留个言。本文地址:http://www.04007.cn/article/1026.html,未经许可,不得转载.

    补充点，因为这里el-input是封装的组件，所以没有原生的keyup事件，所以需要用@keyup.native。其它input输入框事件大全明细如下，el-input自觉加上.native。本文地址:http://www.04007.cn/article/1026.html,未经许可,不得转载.

@keydown（键盘按下时触发），
@keypress(键盘按住时触发)，
@keyup(键盘弹起)本文地址:http://www.04007.cn/article/1026.html,未经许可,不得转载.

也可以通过获取按键的键码 e.keyCode来判断是哪个键。如
@keyup.13 按回车键
@keyup.up 上键
@keyup.down 下键
@keyup.left 左键
@keyup.right 右键
@keyup.enter 回车
@keyup.delete 删除键本文地址:http://www.04007.cn/article/1026.html,未经许可,不得转载.

本文地址:http://www.04007.cn/article/1026.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.

手机扫码直接打开本页面