Vue 正则限制input只能输入大小字母加数字，每四个字符加个空格，最后四位不加空格

网上找了很多都不怎么满意，最后东拼西凑实现了，自我感觉完美嘻嘻

html代码

<input v-model="code_data" type="text" maxlength="24" @input="no_change" placeholder="请输入20位激活码">

这里说一下虽然限制的输入20个字符但是最大却必须24位，因为空格也要站位！

js代码

// 非中文
no_change(e) {
    var $this = e.target; // 获取dom
    // 正则匹配：大小字母加数字-每四个字符加空格-删除最后一位空格（用于展示）
    this.code_data = $this.value.replace(/[^0-9A-Za-z]/g,'').replace(/(.{4})/g,'$1 ').replace(/ $/g,'');
    var data = this.code_data.replace(/ /g,'') // 匹配去掉所有空格（用于提交）
    if(data.length==20){ 
        this.active = true // 开启激活按钮
        //this.check_code() // 校验激活码
    }else{
        this.active = false // 关闭激活按钮
    }
},

效果如上图，展示完美，添加删除目前没啥问题，有问题提出来啊！