Laravel 9表单验证失败时标签数组元素异常合并问题求助

问题原因 #

提交表单时，你直接将数组tagArray赋值给hidden input的value属性，JavaScript会自动把数组转为逗号分隔的字符串（例如["test", "test-98"]会变成"test,test-98"）。

Laravel接收tags[]字段时，会把这个单个字符串包装成数组，因此验证失败后old('tags')返回的是["test,test-98"]，导致前端拿到的是合并后的单个元素，无法正确回显多个标签。

解决方法 #

方法一：生成多个独立的hidden input（推荐） #

修改表单提交的JavaScript代码，循环标签数组，为每个标签创建单独的hidden input：

$("#editPostForm").on('submit', function() {
    if(tagArray.length > 0) {
        tagArray.forEach(tag => {
            const newInput = $("<input>", {
                type:  "hidden",
                name:  "tags[]",
                value: tag
            });
            $(this).append(newInput);
        });
    }
});

这样后端接收到的tags是标准数组，验证失败后old('tags')会返回正确的数组结构，前端let tagArray = @json(old('tags') ?? [])就能拿到["test", "test-98"]，标签会正常回显。

方法二：通过JSON字符串传递数组 #

如果不想生成多个input，可以将数组转为JSON字符串提交，后端解析后再处理：

1. 修改前端提交逻辑：

$("#editPostForm").on('submit', function() {
    if(tagArray.length > 0) {
        const newInput = $("<input>", {
            type:  "hidden",
            name:  "tags",
            value: JSON.stringify(tagArray)
        });
        $(this).append(newInput);
    }
});

2. 后端控制器解析JSON：

// 接收并解析标签数组
$tags = request()->has('tags') ? json_decode(request('tags'), true) : [];

// 将解析后的数组存入old数据（用于验证回显）
session()->flash('tags', $tags);

3. 前端回显时解析JSON：

let tagArray = @json(old('tags') ? json_decode(old('tags'), true) : []);

补充：确保回显标签可删除 #

如果还没实现removeTag函数，补充以下代码保证回显的标签能正常删除：

function removeTag(tagVal) {
    // 从数组中移除标签
    tagArray = tagArray.filter(item => item !== tagVal);
    // 移除DOM元素
    document.getElementById(`tag-${tagVal}`).parentElement.remove();
}

内容的提问来源于stack exchange，提问作者Laralex