input输入框使用正则限制为数字、英文及中文，出现吞字符问题

原创已于 2023-12-05 11:44:24 修改 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-03-17 15:41:55 首次发布

文章描述了一个使用Vue.js开发的前端表单中遇到的问题，即当用户使用微软自带输入法输入汉字时，正则表达式会导致字符被吞并。问题与输入法的交互有关，特别是在切换到汉字模式时。解决方案是调整正则表达式，以避免匹配到额外的字符，影响输入验证。

正则：/[^a-zA-Z0-9\u4E00-\u9FA5]/g,''

采用该正则表达式后，使用搜狗输入法没有问题，但采用微软自带输入法后，会存在输入数字及英文时为正常，切换为汉字后，会存在吞并当前光标前的字符。具体吞并个数和输入法中有几个汉字相关。

输入后点击其它位置 @keyup方法中打印日志会打印出在输入法中当时的字符数，发现会比正常输入英文时多出了一个”'“，导致不符合正则表达式，从而出现问题

更改正则表达式如下代码块所示

<el-form ref="form" :model="form" :rules="formRule">
    <el-form-item label="用户名" prop="userName">
        <el-input class="input-long"  v-model="form.userName"  
            oninput="value=value.replace(/[^'\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">
        </el-input>
    </el-form-item>
    <el-form-item label="账号" prop="userAccount">
        <el-input class="input-long" v-model="form.userAccount"  
            oninput="value=value.replace(/[^'\a-\z\A-\Z0-9\u4E00-\u9FA5\.]/g,'')">
        </el-input>
    </el-form-item>
</el-form>