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

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

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

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

使用的方法：

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

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

要满足输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进行绑定验证方法即可。

注：如果使用mintui中的mt-field标签时，对应的blur（失焦）事件要执行时，要用@blur.native.capture=""来代替@blur。

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

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

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

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

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

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

注释：indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

所以一0~9的数字去做对比，这样就能够比较出文本框输入的是不是数字了

之后就是：

必填项 后面的红色 * ：<span style="color:red">*</span>这样一种写法

这就是一个最简单的vue完成数据校验的使用，以及indexOf方法的一个简单使用； 

在 vue开发中，难免遇到各种表单校验，elementUI自带的验证往往不能满足复杂的需求。

1 是否合法IP地址

2 是否手机号码

3 是否身份证号码

4 是否邮箱

5 合法url

6 验证是否包含英文数字以及下划线

7 检验数值的范围

8 验证数字输入框最大数值

9 验证是否正整数

10 验证是否是[0-1]的小数

11 验证端口是否在[0,65535]之间

12 验证小写字母

13 验证大写字母

14 验证是否两位小数

15 中文校验

16 纯数字校验

17 最多一位小数校验

18 账号校验