Layui中多个同name输入框校验失败，因data.field仅保留最后一个值；需手动遍历DOM获取全部值并自定义校验逻辑，不能依赖lay-verify单值校验机制。
多个同 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" 的邮箱输入框，要求「至少填一个」「每个都符合邮箱格式」：
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 < emails.length; i++) {
if(!/^[\w-.]+@[\w-.]+(.\w+)+$/.test(emails[i])) {
layer.msg('第 ' + (i+1) + ' 个邮箱格式不正确', {icon: 5});
return false;
}
}</p><p>// 校验通过，继续提交
$.post('/api/save', {emails: emails}, function(res){ /<em> ... </em>/ });
return false;
});
- 不要在 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">，然后在 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[]（虽然两者都行，但 List 更安全） - PHP 的
$_POST['tag']会自动变成数组，前提是 HTML 中 name 写成name="tag[]"—— Layui 不要求这样，但如果你用原生 form 提交，加[]更稳妥 - Node.js 的
body-parser默认不解析重复 key 为数组，需配置extended: true并使用qs库或手动去重合并 - 别在前端拼 JSON 字符串传过去，既破坏表单语义，又让 Layui 的
form.render()失效
真正麻烦的不是怎么取值，而是校验时机和 DOM 状态的一致性——动态增删行后，你写的 $('input[name="x"]') 是否还指向当前页面上真实存在的那些元素，这点很容易被忽略。
