elementUI中input框无法输入与禁止输入空格

input框无法输入的解决办法

vue

js

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

如何禁止input框的空格

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

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

// 实现一，简单

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

// js部分
methods: {
    trimLR() {
        this.formData.title = this.formData.title.replace(/^\s+|\s+$/gm,'')
        //replace(/^\s+|\s+$/gm,'')去除input的空字符串
    },
}

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

     
            
     
     
            立即创建
  

 
// 实现一
 
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;
          }
        });
   }
}