Layui表单验证如何支持对多个具有相同Name属性的Input进行校验-Layui教程-PHP中文网

layui中多个同name输入框校验失败，因data.field仅保留最后一个值；需手动遍历dom获取全部值并自定义校验逻辑，不能依赖lay-verify单值校验机制。

layui表单验证如何支持对多个具有相同name属性的input进行校验

多个同 name 的 input 校验失败，是因为 data.field 只取最后一个值

当你在 Layui 表单里放了多个 <input name="tag">，比如动态添加的标签组、多行地址、批量选择项，form.on('submit', ...) 回调里的 data.field 默认只保留同名字段的**最后一个值**。这不是 bug，是 jQuery serialize() 的默认行为，而 Layui 的 data.field 底层依赖它。

常见现象：页面上有 3 个 name="phone" 的输入框，用户填了 138xxx、139xxx、150xxx，但 data.field.phone 只是 "150xxx"，前两个直接丢弃。

必须手动遍历 DOM 获取全部同名 input 的值，不能依赖 data.field 直接读取
校验逻辑（比如“至少填两项”“每项需为手机号”）也得基于这个遍历结果做，不能传给 form.verify() 的 value 参数——那个 value 永远只是第一个匹配到的 input 的值
如果你用 lay-verify="required" 绑在某个 checkbox 或 input 上，它只会检查那个元素自身是否勾选/有值，对同 name 的其他兄弟完全无感

用 jQuery 遍历 + 自定义验证函数实现完整校验

核心思路：放弃把校验逻辑塞进 lay-verify 属性，改用表单提交前手动校验。因为 form.verify() 的设计初衷是单值校验，强行让它处理数组会绕弯且不可靠。

示例场景：一组 name="email" 的邮箱输入框，要求「至少填一个」「每个都符合邮箱格式」：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

form.on('submit', function(data){
  var emails = $('input[name="email"]').map(function(){
    return $(this).val().trim();
  }).get().filter(Boolean); // 过滤空值
<p>if(emails.length === 0) {
layer.msg('请至少填写一个邮箱', {icon: 5});
return false;
}</p><p>for(var i = 0; i </p><p>// 校验通过，继续提交
$.post('/api/save', {emails: emails}, function(res){ /<em> ... </em>/ });
return false;
});
</p>

不要在 input 上写 lay-verify="email"，它只校验单个，且无法感知同名组
用 $('input[name="email"]') 显式获取全部，比依赖 data.field 更可控
错误提示要带序号（如“第 2 个”），否则用户不知道哪条出错
如果表单是动态渲染的（比如用 layui.form().render() 加载），确保这段校验代码在 render 之后执行

若坚持用 lay-verify，只能绑定到容器并手动触发

少数场景下你确实想复用 Layui 的提示样式和 submit 拦截机制，可以将 lay-verify 放在父容器上，比如 <div class="layui-form-item" lay-verify="multiEmail">，然后在 <code>form.verify() 中写逻辑：

form.verify({
  multiEmail: function(value, item){
    // value 是空字符串（因为 div 没 value），忽略它
    var inputs = $(item).find('input[name="email"]');
    var validCount = 0;
    inputs.each(function(){
      if(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($(this).val().trim())) {
        validCount++;
      }
    });
    if(inputs.length === 0) return '请添加邮箱输入框';
    if(validCount === 0) return '至少需要一个有效邮箱';
  }
});

必须确保所有目标 input 都在该 div 内，否则 $(item).find(...) 找不到
item 是当前绑了 lay-verify 的 DOM 元素（这里是 div），不是 input 本身
这种写法容易和内置规则混淆，调试时难以定位是哪个环节触发的校验
不支持像 required 那样自动标红边框——你需要自己用 $(item).addClass('layui-form-danger') 控制样式

后端接收时注意 name 数组的解析方式

前端用 $('input[name="tag"]').serialize() 提交，后端收到的是 tag=val1&tag=val2&tag=val3 形式。这没问题，但要注意：

Spring Boot 默认用 @RequestParam List<string> tag</string> 接收，不是 String[]（虽然两者都行，但 List 更安全）
PHP 的 $_POST['tag'] 会自动变成数组，前提是 HTML 中 name 写成 name="tag[]" —— Layui 不要求这样，但如果你用原生 form 提交，加 [] 更稳妥
Node.js 的 body-parser 默认不解析重复 key 为数组，需配置 extended: true 并使用 qs 库或手动去重合并
别在前端拼 JSON 字符串传过去，既破坏表单语义，又让 Layui 的 form.render() 失效