input框无法输入的解决办法

vue
<el-input type="input" v-model="input" @input="change($event)"></el-input>
js

methods:{
  change(e) {
      this.$forceUpdate()
    }
}

如何禁止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,'')
        //replace(/^\s+|\s+$/gm,'')去除input的空字符串
    },
}

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;
          }
        });
   }
}

作者：吴小冷
链接：https://www.jianshu.com/p/b1b28ca7b0bd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。