Layui表单验证:实现中文长度限制与字符过滤
本文介绍如何在Layui框架中通过自定义form.verify实现复杂的输入框验证。重点解决两个需求:一是限制老师昵称中英文字符不超过20、中文不超过10;二是限制课程简介仅允许中文及标点且长度不超过100。通过遍历Unicode编码区分中英文字符并累加权重,结合lay-verify属性完成前端校验。
Layui表单验证:实现中文长度限制与字符过滤
在项目开发中,经常需要对表单输入进行严格限制。例如,在录入老师昵称时,要求输入框不能为空,且需控制字符长度:英文字符上限为20,中文字符上限为10。而在填写课程简介时,textarea仅允许输入中文及中文标点符号,且总长度不得超过100。本文基于Thymeleaf、Layui及Shiro框架环境进行说明。
经过查阅资料,发现缺乏完整的解决方案,因此将具体的实现代码与逻辑整理如下。
非空验证处理
首先处理非空验证。

该需求较为简单,只需在HTML元素中添加属性lay-verify="required"即可。这一功能在Layui官方文档中有详细说明,可参考https://www.layui.com/doc/element/form.html。
接下来重点讨论长度限制的实现。
预期效果如图。


实现方案需要编写自定义的form.verify函数,因为Layui中lay-verify是触发表单验证的关键字。
Layui内置了多种验证规则供选择:
required(必填项)
phone(手机号格式)
email(邮箱格式)
url(网址格式)
number(数字格式)
date(日期格式)
identity(身份证格式)
自定义验证规则
由于内置规则无法满足特定的中英文混合长度限制,因此必须使用自定义值的方法。
自定义长度验证实现
具体代码实现如下。
HTML结构代码如下:
<label class="layui-form-label">老师昵称:</label>
<div class="layui-input-block layui-width21em">
<input id="userName" name="userName" placeholder="请输入昵称" class="layui-input"
autocomplete="off">
<span style="color:red">(20个字符或者10个中文字)</span>
</div>

JavaScript验证逻辑如下:
// 定义自定义验证规则
form.verify({
clength: function (value) {
var i,sum;
sum=0;
for(i=0;i<value.length;i++){
if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255))
sum=sum+1;
else
sum=sum+2;
}
if (sum > 200) {
return '老师简介最多只能200个字符或者100个中文字';
}
},
nlength: function (value) {
var i,sum;
sum=0;
for(i=0;i<value.length;i++){
if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255))
sum=sum+1;
else
sum=sum+2;
}
if (sum > 20) {
return '老师昵称最多只能20个字符或者10个中文字';
}
}
});
});|

注意:该验证函数必须在form表单提交之前定义,否则无法生效。
核心思路是:遍历文本内容的每个字符,获取其Unicode编码值。中文通常占用两个字节(编码值较大),英文占用一个字节(编码值较小)。通过累加编码值计算总权重,然后将自定义函数名赋值给input的lay-verify属性,格式为lay-verify="required|nlength"(其中nlength为自定义函数名)。
课程简介的中文与标点限制
随后解决另一个问题:在填写课程简介时,限制长度不超过200,且仅允许输入中文和中文标点符号。
具体效果要求如下。

对应的HTML代码如下:
<label class="layui-form-label">课程介绍:</label>
<div class="layui-input-block">
<textarea class="layui-textarea" style="height:200px;width:800px" lay-verify="required" name="content" placeholder="请输入课程介绍"
th:text="${swCourse.content}"></textarea><span style="color:red">(字符数控制在100汉字以内,且只能上传文字)</span>
</div>
</div>|
相关的JavaScript代码如下:
layui.use([ ‘layer', ‘jquery', ‘form', ‘upload', ‘laytpl' ], function() {
var $ = layui.jquery;
var layer = layui.layer;
var laytpl = layui.laytpl;
var form = layui.form, upload = layui.upload;
//自定义验证规则
form.verify({
length: function (value) {
if(value.length > 20){
return '课程名称最多只能20个字';
}
},
characters:function(v){
var numasc = 0;
var charasc = 0;
var otherasc = 0;
for (var i = 0; i < v.length; i++) {
var asciiNumber = v.substr(i, 1).charCodeAt();
if (asciiNumber >= 48 && asciiNumber <= 57) {
numasc += 1;
}
if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
charasc += 1;
}
if ((asciiNumber >= 33 && asciiNumber <= 47)||(asciiNumber >= 58 && asciiNumber <= 64)||(asciiNumber >= 91 && asciiNumber <= 96)||(asciiNumber >= 123 && asciiNumber <= 126)) {
otherasc += 1;
}
}
if(numasc > 0 || charasc>0 || otherasc>0) {
return "只能输入中文";
}
} ,
clength: function (value) {
var i,sum;
sum=0;
for(i=0;i<value.length;i++){
if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255)){
sum=sum+1;
}else{
sum=sum+2;
}
}
if (sum > 200) {
return '课程介绍最多只能输入100个中文字';
}
}
});|

最后,将自定义验证规则赋值给textarea,即设置lay-verify="required|characters|clength"。
完成上述配置后,功能即可正常运行(注:原文排版可能存在格式调整困难的情况)。
如果您有其他更优的实现方式,欢迎补充交流。如有疏漏之处,敬请指正。
以上关于Layui输入框只允许输入中文且判断长度的示例分享完毕,希望能为读者提供参考,也感谢大家的支持。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
