vue中输入框事件的使用，数值校验

本文链接：https://blog.csdn.net/qq_42112846/article/details/88541275

最近做项目，用到vue去监听输入框当中值，并且去校验值的正确性，

我们都知道 vue 当中主要监听输入框的方法有四个：input change blur keyup.enter

他们都可以使用@+xxxx="在vue当中定义的方法"，去引用实现，然后利用v-model去绑定data当中的数据，

下面我们就来介绍一下这四个方法：

一、@input（或者是v-on:input）

使用的方法：
//这个事件在用户输入时触发的
//v-model 就是你绑定的变量，输入的值会存储在这个变量当中
<input type="text" placeholder="文本框默认值" v-model="inputVal"  v-on:input="search" value="" />

二、@change
该事件和enter事件相似，在手机上都是要经过触发虚拟键盘的搜索键才会触发事件。使用方式同input事件。

三、@keyup.enter

该事件与v-on:input事件的区别在于：input事件是实时监控的，每次输入都会调用，而@keyup.enter事件则是在pc上需要点击回车键触发，而在手机上则是需要点击输入键盘上的确定键才可触发。

四、@blur（失焦）

要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。
注：如果使用mintui中的mt-field标签时，对应的blur（失焦）事件要执行时，要用@blur.native.capture=""来代替@blur。

下面来简单的使用一下blur 来校验文本框当中是否输入的都是数值：

首先我们在页面当中定义一个输入框，并绑定我们在vue当中定义的方法以及变量：

  <div class="form-group">
            <div class="col-sm-2 control-label">数值
//这个是最简单用来标识这个参数必填的一个标志，也就是大家经常见到的（*）--red
                <span style="color:red">*</span>
            </div>
            <div class="col-sm-10">
//文本框之上绑定 model和checknNum方法
                <input type="text" class="form-control" v-model="test.itemValue" placeholder="数值(必填)" @blur="checkNum"/>
            </div>
        </div>

之后我们在来看一下无讹当中定义的变量以及方法：

var vm = new Vue({
	el:'#rrapp',
	data:{
//定义的对象
        test: {},
       	},
	methods: {
//校验数据的方法，在这里我们不用正则表达式，使用最简单的indexOf方法
        checkNum:function() {
        	var num = vm.test.itemValue;
		            for (var i = 1; i < num.length; i++) {
                if (!('0123456789'.indexOf(num.substr(i, 1)) > -1)) {
                    alert("请输入正确的数值参数");
                }
            }

		}
});

下面介绍一下indexOf这个方法：

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(searchvalue,fromindex)

该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。