Layui表单验证:实现中文长度限制与字符过滤

作者:小括号时间:2026-10-23 11:19:02浏览:463

本文介绍如何在Layui框架中通过自定义form.verify实现复杂的输入框验证。重点解决两个需求:一是限制老师昵称中英文字符不超过20、中文不超过10;二是限制课程简介仅允许中文及标点且长度不超过100。通过遍历Unicode编码区分中英文字符并累加权重,结合lay-verify属性完成前端校验。

Layui表单验证:实现中文长度限制与字符过滤

在项目开发中,经常需要对表单输入进行严格限制。例如,在录入老师昵称时,要求输入框不能为空,且需控制字符长度:英文字符上限为20,中文字符上限为10。而在填写课程简介时,textarea仅允许输入中文及中文标点符号,且总长度不得超过100。本文基于Thymeleaf、Layui及Shiro框架环境进行说明。

经过查阅资料,发现缺乏完整的解决方案,因此将具体的实现代码与逻辑整理如下。

非空验证处理

首先处理非空验证。

Layui表单验证:实现中文长度限制与字符过滤

该需求较为简单,只需在HTML元素中添加属性lay-verify="required"即可。这一功能在Layui官方文档中有详细说明,可参考https://www.layui.com/doc/element/form.html。

接下来重点讨论长度限制的实现。

预期效果如图。

Layui表单验证:实现中文长度限制与字符过滤

Layui表单验证:实现中文长度限制与字符过滤

实现方案需要编写自定义的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>

Layui表单验证:实现中文长度限制与字符过滤

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个中文字';
   }
  }
 });
 });|

Layui表单验证:实现中文长度限制与字符过滤

注意:该验证函数必须在form表单提交之前定义,否则无法生效。

核心思路是:遍历文本内容的每个字符,获取其Unicode编码值。中文通常占用两个字节(编码值较大),英文占用一个字节(编码值较小)。通过累加编码值计算总权重,然后将自定义函数名赋值给input的lay-verify属性,格式为lay-verify="required|nlength"(其中nlength为自定义函数名)。

课程简介的中文与标点限制

随后解决另一个问题:在填写课程简介时,限制长度不超过200,且仅允许输入中文和中文标点符号。

具体效果要求如下。

Layui表单验证:实现中文长度限制与字符过滤

对应的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个中文字';
   }
  }
 });|

Layui表单验证:实现中文长度限制与字符过滤

最后,将自定义验证规则赋值给textarea,即设置lay-verify="required|characters|clength"。

完成上述配置后,功能即可正常运行(注:原文排版可能存在格式调整困难的情况)。

如果您有其他更优的实现方式,欢迎补充交流。如有疏漏之处,敬请指正。

以上关于Layui输入框只允许输入中文且判断长度的示例分享完毕,希望能为读者提供参考,也感谢大家的支持。

作者最新文章