需求是只允许输入中文 报错如下:
输入奇怪也是同样错误
一开始以为是 这个原因:去掉el-input的红色波浪线
Chrome浏览器中的input和textarea元素中的英文单词出现红色波浪线,这通常是因为浏览器默认开启了语法检查功能。要去掉这些红色波浪线,可以在相应的HTML元素中添加spellcheck="false"属性。这样,浏览器就不会再对该元素进行拼写检查了。
例如,对于textarea元素,可以这样写:
<textarea spellcheck="false"></textarea>
对于input元素,同样可以添加该属性:
<input type="text" spellcheck="false">
这样,无论是在textarea还是input中输入的英文单词,都不会再出现红色波浪线。需要注意的是,这种方法只是去除了拼写检查功能,并不会影响其他与输入内容相关的功能或行为。
原来是代码中加了/[^\w\u4E00-\u9FA5]/g正则
<el-input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" :disabled="see"
v-model="ruleForm.name" clearable placeholder="请输入供应商姓名"></el-input>
提到的 onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" 这个正则表达式的作用是,在输入内容的时候,将任何非单词字符(非字母、数字、下划线)以及非中文字符(Unicode范围 \u4E00-\u9FA5)都替换为空字符串,即删除这些字符。
如果输入“一号”时变成了“yihoa一号”,这可能是因为正则表达式的替换逻辑在每次按键时都会执行,并且替换的方式不是您期望的那样。
问题可能在于正则表达式 /[^\w\u4E00-\u9FA5]/g 的使用。\w 匹配任何单词字符,等价于 [a-zA-Z0-9_]。因此,当您输入“一”时,它会被视为一个有效的字符(因为 \u4E00-\u9FA5 包括中文字符),所以不会被替换。但是,当您输入“号”时,由于它不在 \w 或 \u4E00-\u9FA5 的范围内,它会被替换为空字符串。
然而,如果“号”被替换后,光标位置可能会改变,导致后续输入的字符位置不正确,这可能是导致“yihoa一号”这种奇怪替换结果的原因。
如果您想要的是只允许输入字母、数字、下划线和中文字符,并且不想在输入时出现奇怪的替换结果,您可以尝试使用以下方式:
- 只在用户输入非法字符时才进行替换。
- 使用
input事件的监听器而不是keyup,因为input事件会在值真正改变时触发,而keyup会在按键释放时触发,可能会导致在连续输入时出现问题。
下面是一个简单的例子,使用 input 事件来过滤非法字符:
<input type="text" id="myInput" />
<script>
document.getElementById('myInput').addEventListener('input', function(event) {
var regex = /[^\w\u4E00-\u9FA5]/g;
var value = this.value.replace(regex, '');
if (this.value !== value) {
this.value = value;
}
});
</script>
这段代码会监听输入框的 input 事件,当输入框的值发生变化时,会检查是否有非法字符,并将它们替换为空字符串。只有当值真正改变时,才会更新输入框的值,这可以避免因为光标位置变化导致的奇怪行为。
改为@input 没有生效
<el-input @input="value = value.replace(/[^\w\u4E00-\u9FA5]/g, '')" :disabled="see" v-model="ruleForm.name"
clearable placeholder="请输入供应商姓名"></el-input>
[^\w\u4E00-\u9FA5]/g的解释
这个正则表达式可以分为两部分来解释:
-
[^\w\u4E00-\u9FA5]:这部分表示匹配任何不是字母、数字、下划线(\w)以及汉字(\u4E00-\u9FA5,表示 Unicode 编码范围内的中文字符)的字符。换句话说,它匹配除了字母、数字、下划线和中文字符以外的任何字符。 -
/g:这是正则表达式中的标志符号,表示全局匹配,即在整个文本中查找匹配的所有结果。
因此,整体来说这个正则表达式的作用是在文本中查找并匹配所有不是字母、数字、下划线和中文字符的字符。
只能输入中文的正则
validator: function (rule, value, callback) {
if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
callback(new Error("请输入中文"));
} else {
callback();
}
},
trigger: "blur"
}