[vue]vue+elementUI进行字符类型验证

最近公司的项目中制作了一个运营平台，当中很多的输入框之中都需要进行输入的字符类型验证。如果是在HTML之中直接写的话，我们可以在HTML中直接书写，例如：

<input  type="text" name="username" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" />

那么在vue中要怎么玩呢？


如果在使用了element的项目中，我们在其上直接keyup事件会出现报错，为什么呢？因为element ui会默认自动在元素的上层封装一个div，这样我们写的keyup事件实际是写在div上，所以会报错。


说了那么多，该咋整呢


先上代码：
html中是这样的：

<el-input v-model="form.accountName" maxlength="15" minlength="1" @keyup.native="proving1" placeholder="请输入数字、字母及下划线"></el-input>

script中是这样的：

methods: {
    proving1(){
       this.form.accountName=(this.form.accountName).replace(/[^\w_]/g,'');     
      },
}

为什么要在keyup后加一个native呢？这个是干什么用的呢？
这是Vue中的一个修饰符，作用是可以在vue中给某个组件的根元素上监听一个事件。因此这样我们便能将这个keyup事件直接作用在input上。所以需要添加这个修饰符。

wx160：我们通常这样写回到原帖

我们通常这样写

这个不错哦