必须用 oninput + compositionstart/end + 自定义 verify 规则三者配合才能实现稳定中文输入限制:oninput 实时过滤非中文字符并保护光标位置,composition 事件避免输入法上屏中断,form.verify 提交时校验长度与格式。

直接在 input 上加正则拦截或监听事件,但仅靠 lay-verify="required" 或 type="text" 无法实现「只允许中文」——Layui 没有内置该规则,必须手动干预输入流。
oninput + 正则实时过滤是最稳的写法
用户粘贴、拖入、拼音上屏等场景都会绕过简单属性限制,oninput 是唯一能覆盖所有输入途径的事件。关键不是“删掉非中文”,而是“在输入发生后立刻修正值”,否则光标会跳、输入法会卡。
- 用
/^[u4e00-u9fa5]*$/匹配纯中文(含常用汉字),注意末尾加*允许空值,别用+否则首次输入就失败 -
oninput回调里先保存光标位置,再replace(/[^\u4e00-\u9fa5]/g, ''),最后恢复光标——否则中文输入法打“你好”时,刚输“ni”,还没选字就清空了 - 别用
onkeyup:无法捕获鼠标粘贴;也别只靠maxlength,它对中文输入无效 - 示例:
<input type="text" oninput="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">(基础版,无光标保护)
配合 compositionstart/end 避免中文输入法崩溃
用户用搜狗/百度输入法打“中国”,在“zhong”阶段 value 是空或拼音,此时如果强行过滤,会清空输入框,导致上屏失败。必须识别输入法组合状态。
- 声明一个开关变量
let isComposing = false - 绑定
input.addEventListener('compositionstart', () => isComposing = true)和'compositionend'设为false - 在
oninput里加判断:if (!isComposing) { /* 执行过滤 */ } - 否则 compositionend 触发后才过滤,确保拿到的是最终上屏文字
自定义 form.verify 规则用于提交校验
前端过滤只是体验优化,后端仍需校验。Layui 的 form.verify 必须注册新 key,且规则函数返回 true 或字符串错误提示。
- 注册规则:
form.verify({ chinese: function(value) { return /^[u4e00-u9fa5]{1,10}$/.test(value) ? true : '请输入1–10个中文'; } }); - HTML 中使用:
<input name="name" lay-verify="chinese"> - 注意:这个规则只在
form.on('submit')时触发,不控制实时输入,必须和上面的oninput配合 - 正则中
{1,10}表示长度限制,若允许空值,改成{0,10}并去掉required
最容易被忽略的是 composition 事件兼容性——没处理它,用户在 Windows 下用搜狗输入就会反复闪退选项;其次是验证规则没和实时过滤联动,导致“看着能输,提交却报错”。这两点不补,所谓“只输中文”就是半残功能。











