element UI 中输入框禁止输入空格的实现

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

使用惯了原生js的开发时，再使用element UI会发现以前的写法不起作用了，后来在网上搜索，发现实现方式略有不同，需要加一下特定的修饰符。

在处理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事件来处理禁止输入的问题。

3、使用element UI 的表单验证功能

<el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
     ... ...
     <el-form-item label="名称" prop="title">
            <el-input placeholder="请输入名称" v-model="formData.title" maxlength=30></el-input>
     </el-form-item>
     ... ...
     <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>
</el-form>

-----------------

// 实现一

data() {
        // 自定义title验证规则
        var validateTitle = (rule, value, callback) => {
            const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/
            if (!reg.test(value)) {
                callback(new Error('只允许填写汉字、字母、下划线'))
            } else {
                callback()
            }
        }
        return {
            ... ...
            //表单验证规则
            rules: {
                ... ...
                title: [
                    { required: true, message: '请输入名称', trigger: 'change' },
                    { validator: validateTitle, trigger: 'change' }
                ],
                ... ...
            },
            ... ... 
        }
    },

// 实现二
data() {
        return {
            ... ...
            //表单验证规则
            rules: {
                ... ...
                title: [
                    { 
                        required: true, 
                        validator: (rule, value, callback) => {
                            const reg = /^[a-zA-Z_\u4e00-\u9fa5]+$/
                            if (value == '') {
                                callback(new Error('请填写必填项'))
                            } else if (!reg.test(value)) {
                                callback(new Error('只允许填写汉字、字母、下划线'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'change' 
                     }
                ],
                ... ...
            },
            ... ... 
        }
    },
---------------------

methods: {
   ... ...
   submitForm(formName) {
       this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
   }
   ... ...

}

该方法，需要使用element UI 的Form表单el-form标签，ref属性用来指定表单的名称，用于在代码中使用this.$ref.XXX方法寻找表单所在的DOM节点；rules属性用来指定验证规则；在el-form-item标签中，添加prop属性，属性值与rules验证规则中需验证的字段保持一致。以上两种实现方法，请注意区别和各自的特点。如果考虑复用性，可以使用实现一的写法，如果代码比较多，并且也不会复用的，可以参考实现二的写法，方便规则的寻找。

结合确定按钮的点击事件，将表单ref的属性值传递给submitForm方法，通过this.$refs[formName].validate()方法来判定表单中所有的验证是否都通过了，valid为false，表示未通过的会在表单的相应位置展示自定义的message信息，提示用户按照规则输入。如果valid为true，表明验证通过，执行相关逻辑。这里要注意的一点是，在验证规则rules中，非验证条件下，必须返回callback()方法，使得表单验证形成闭合，否则虽然表单中都展示绿色边框，表示验证通过，但是valid还是false。

此外，第三种方法，只会实时提示警告，展示给用户，所输入的内容不符合自定义的验证规则，但是不会将输入的内容进行过滤，如果有完全禁止输入，而不是只提示用户的需求时，需要结合方法二来进行处理。

举一反三，其他禁止输入的需求，比如只允许输入数字，不允许输入特殊字符等需求，也可以按照上述方法进行处理，并保持数据与展示一致。