ElementUI 中输入框禁止输入空格

在项目开发过程中，处理输入框的数据时，不可避免的会有一些禁止输入的需求，例如禁止输入空格，只允许输入数字、汉字或者禁止输入特殊字符等。

在处理input框禁止输入空格时，实现方法，目前知道的有两种，展示如下：

1、使用vue框架中的.trim修饰符

<el-input placeholder="请输入名称" v-model.trim="formData.title" maxlength=30></el-input>

2、使用原生input标签自带的keyup事件监听方法

// 实现一，简单

<el-input placeholder="请输入名称" v-model="formData.title" maxlength=30 @keyup.native="$event.target.value $event.target.value.replace(/^\s+|\s+$/gm,'')"></el-input>

// 实现二，更符合WEB标准，结构,表现和行为分离原则

 <el-input placeholder="请输入名称" v-model="formData.title" maxlength=30 @keyup.native="trimLR"></el-input>

// js部分

 methods: {
    trimLR() {
      this.formData.title = this.formData.title.replace(/^\s+|\s+$/gm, '')
    }
  }

以上实现方法，需要注意，原生事件onkeyup，改成了@keyup，并且需要在后边追加修饰符`.native`，这样就是告诉vue使用input的原生事件监听方法，此外，在方法的数据处理中，使用的是`$event.target.value`来代表input框的value值，不是this.value，也不是document.getElementById('XXX').value。

在方法一中，虽然最终formData.title字段的值，过滤掉了首尾的空格，但是实践发现，在input框的展示上，并没有将空格过滤掉，还是展示的是有空格的数据。因此，更提倡第二种方法，使得数据和展示保持一致性，也方便后续问题的排查和维护。

尝试在方法二中，将keyup事件方法改为input或者change，虽然最终结果，value值过滤掉了空格，但是在页面展示上，value值还是保留了空格，以及光标的位置显示，有些混乱的问题，与方法一的表现差不多。所以还是提倡使用keyup事件来处理禁止输入的问题。

去除所有空格:
str = str.replace(/\s+/g,"");
去除两头空格:
str = str.replace(/^\s+|\s+$/g,"");
去除左空格：
str=str.replace( /^\s/, '');
去除右空格：
str=str.replace(/(\s$)/g, "");

只能输入英文数字_-
   <el-input v-model="formData.dataSetNo" clearable placeholder="请输入" size="mini" :maxlength="20" oninput="value=value.replace(/[^A-Za-z0-9-_]+$/g,'')" />
//^ 要放[] 里 不然是非

最后编辑于：2021.01.08 16:21:42