el-input的onkeyup解决报错Uncaught ReferenceError: xx is not defined at HTMLInputElement.onkeyup

本文记录了一位开发者在Vue项目中遇到的输入框字符校验问题。当`languageStatus`为0时，仅允许输入中文；为1时，则允许输入英文、字母、短横线、单引号和空格。最初尝试的直接在`onkeyup`事件中使用条件判断导致错误。最终通过创建立即执行函数解决了问题，确保了实时校验功能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在输入框输入时校验输入字符，中英文时校验方式不同

（languageStatus == 0）中文情况下只能输中文汉字

（languageStatus == 1）英文情况下只能输英文字母，短横线，单引号和空格

初始实现：

众所周知，没有条件判断的时候可以直接用

<!-- 只能输入汉字 -->
<el-input v-model="value"
          onkeyup="value = value.replace(/[^\u4e00-\u9fa5]/g, '')"></el-input>

那么如果存在条件判断该怎么做呢？

我的第一反应是这样：

<!-- 
languageStatus为0时是中文，只能输汉字
languageStatus为1时是英文，只能输英文字母，短横线，空格和单引号
 -->
<el-input v-model="value"
         :onkeyup="value = languageStatus
                ? value.replace(/[^a-zA-Z\-\s\']/g, '')
                : value.replace(/[^\u4e00-\u9fa5]/g, '')"></el-input>

给属性前加上冒号(:)，后面改成表达式，齐活~不得不说我也太机智了hhh

结果运行后发现，中英文规则校验倒是管用了

但是一输入就报错：

问题出在哪呢？

在网上苦苦寻觅这个错误都找不到答案

有一篇帖子类似问题底下说改成方法试试？

但是如果传入的是个方法去调用的话，就不能实时的校验输入内容了

然后经过我一遍遍反复试探，终于功夫不负有心人

解决办法：

<el-input v-model="value"
          :onkeyup="
            (function () {
              value = languageStatus
                ? value.replace(/[^a-zA-Z\-\s\']/g, '')
                : value.replace(/[^\u4e00-\u9fa5]/g, '')
            })()
          "></el-input>

改成立即执行函数就可以啦~

特此纪录！

原创不易，转载务必注明出处。