使用 JavaScript 和 Blade 管理过时的值：Laravel 10 动态输入表单

在 Laravel 10 中使用 JavaScript 管理旧表单数据

在 Laravel 10 中开发动态表单时，一个常见的挑战是在验证失败后保留用户输入。在 Blade 模板中，这通常可以通过 辅助函数，它恢复之前输入的值。但是，在使用 JavaScript 附加表单字段时动态使用此函数需要特殊处理。

在我的项目中，我在开发一个允许用户动态添加和删除奖励的系统时遇到了这个问题。验证失败后，表单应保留旧的奖励数据并相应地显示。拉拉维尔的 函数在 Blade 中运行良好，但将其与 JavaScript 附加逻辑结合起来可能会很棘手。

问题的关键在于 Blade 模板和 JavaScript 对数据的解释方式不同。当使用 JavaScript 附加新元素时，我需要动态插入旧值，但执行此操作的语法并不总是简单明了。未能正确实现这一点会导致页面重新加载后丢失重要数据。

本指南将引导您通过实用的方法使用 JavaScript 生成的字段中的函数。我们将探索如何动态附加新输入并确保在 Laravel 10 项目中正确保留旧值。让我们深入了解一下！

命令	使用示例
@json()	此 Blade 指令将 PHP 变量转换为 JSON 格式以在 JavaScript 中使用。在这种情况下，它有助于将旧的奖励值从控制器传递到 JavaScript，从而使动态表单处理更容易。
Object.entries()	此 JavaScript 方法用于循环奖励数据（对象）并返回键值对。这允许通过提取单独的奖励信息动态地附加每个奖励。
insertAdjacentHTML()	将 HTML 插入到相对于元素的特定位置的 JavaScript 方法。在本例中，它用于动态地将新的奖励输入插入到表单中，而无需重新加载页面。
old()	Blade 辅助函数，用于在验证失败后检索先前提交的输入数据。当用户需要更正验证错误时，此命令对于保留表单数据至关重要。
assertSessionHasOldInput()	一种 PHPUnit 测试方法，用于检查旧输入数据在会话中是否可用。这可确保表单验证失败时正确保留用户输入以供将来尝试提交表单。
assertSessionHasErrors()	用于确认表单验证错误存在的 PHPUnit 方法。此命令对于测试后端验证是否正确捕获输入错误并将错误返回给用户至关重要。
forEach()	在 JavaScript 中，此方法允许循环数组或对象以对每个元素执行操作。在这里，它用于迭代奖励数据并将其动态附加到表单中。
document.querySelectorAll()	检索与特定选择器匹配的所有元素。这用于计算表单上已有多少奖励项目，因此新项目在动态附加时可以具有唯一索引。

Laravel 10 中使用旧值的动态表单处理

在提供的脚本中，核心挑战是动态附加新的奖励表单字段，并能够保留 Laravel 验证失败后。通常，Laravel 的 表单提交失败后，helper 会检索之前输入的值，但是当使用 JavaScript 附加元素时，这通常很困难。解决方案在于结合 Blade 的 JavaScript 指令，允许旧的输入数据直接传递到动态生成的字段中。

功能 是这种方法的关键。它使用 JavaScript 为每个奖励附加新的输入字段。在附加字段之前，我们使用以下命令检查是否有任何旧值 。这会将 PHP 端的旧输入值转换为 JavaScript 对象，然后可以使用 。此方法允许循环遍历每个奖励条目并将其关联值插入到动态创建的表单元素中。

该脚本还使用 方法，在相对于现有表单的特定位置插入 HTML 内容。这对于在不刷新页面的情况下添加新的奖励项目至关重要。例如，添加新奖励时，脚本会创建一个具有适当输入值的新表单字段，并将其附加到表单容器。这 函数确保如果表单验证失败，先前输入的数据将显示回给用户。

最后，单元测试对于验证这些脚本的行为至关重要。在这种情况下， 和 在 PHPUnit 测试中使用，以确保 Laravel 正确存储和检索旧的输入数据。这些测试验证了 验证失败后，数据将保留在会话中，确保动态表单字段在后续表单重新加载时保留其先前的输入值。 JavaScript 和 Blade 的这种组合确保了在 Laravel 中处理复杂、动态表单时的无缝用户体验。

// JavaScript function to dynamically append form fields
function addMoreItem() {
    let rewardCount = document.querySelectorAll('.reward-item').length + 1;
    let rewardData = @json(old('reward'));  // Get old values from Laravel
    let rewardItem = rewardData ? rewardData[rewardCount] : {};  // Default to empty object
    let rewardHtml = `
        <div id="reward-${rewardCount}" class="reward-item">`
            <input type="text" name="reward[${rewardCount}][reward_name]"
                value="{{ old('reward.${rewardCount}.reward_name', rewardItem.reward_name || '') }}" />`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// JavaScript function that handles form generation and appends old values if available
function appendRewardItem(key, value) {
    let rewardHtml = `
        <div id="reward-${key}" class="card">`
            <input type="text" name="reward[${key}][reward_name]" class="form-control"
                value="{{ old('reward.' + key + '.reward_name', value.reward_name || '') }}">`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// Loop through existing rewards and append them
let rewardDetails = @json(old('reward'));
if (rewardDetails) {
    Object.entries(rewardDetails).forEach(([key, value]) => {
        appendRewardItem(key, value);
    });
}

// PHPUnit test for validating old input values
public function testOldRewardValuesPersist() {
    // Simulate form validation failure
    $response = $this->post('/submit-form', [
        'reward' => [
            '1' => [
                'reward_name' => 'Test Reward 1'
            ]
        ]
    ]);
    $response->assertSessionHasErrors();
    $response->assertSessionHasOldInput('reward');  // Check old input
}

使用 Blade 和 JavaScript 优化 Laravel 中的动态表单处理

在 Laravel 中，动态处理表单输入，尤其是使用 JavaScript，需要仔细注意 Blade 和 JavaScript 的交互方式。经常被忽视的一个关键方面是在验证错误发生后维护表单数据。使用 辅助函数，Laravel 提供了一种简单的方法来重新填充输入字段，但是将此功能合并到动态添加的元素中需要更周到的方法。在处理数组或集合（例如奖励）时尤其如此，其中每个项目都必须保留其数据。

应对这一挑战的一个强​​大解决方案是结合 Laravel 使用 JavaScript 指令。这 @json() 指令允许服务器端数据转换为 JavaScript 可以理解的格式，这对于将旧值传递回前端至关重要。通过将这些值映射到新附加的表单字段中，您可以确保用户在发生验证失败时不会丢失进度。该技术利用了 Blade 的模板渲染功能，同时还允许基于 JavaScript 的表单管理的灵活性。

除了简单地恢复旧值之外，考虑错误处理和输入验证也很重要。此外 , Laravel 提供 在特定字段旁边显示验证消息，使用户更容易理解出了什么问题。集成这两个命令可确保在表单验证失败且用户需要更正其输入时提供无缝体验。通过将 Blade 的功能与 JavaScript 的灵活性相结合，您可以在 Laravel 应用程序中保持动态而稳定的用户体验。

1. 验证失败后如何在 Laravel 中重新填充表单数据？
2. 您可以使用 Blade 模板中的函数可在验证失败后检索先前输入的值。例如， 可用于重新填充文本输入。
3. 如何在动态生成的表单字段中使用旧值？
4. 要在 JavaScript 生成的字段中使用旧值，请使用 指令，然后将其动态插入到表单中。例如，使用 将旧值传递给 JavaScript，然后将它们附加到表单字段。
5. 为什么我的 JavaScript 无法识别 Blade 语法？
6. JavaScript 无法直接解释 Blade 语法，因为它运行在客户端，而 Blade 渲染在服务器上。要将 Blade 变量传递给 JavaScript，您应该使用 将 PHP 变量转换为 JavaScript 可以读取的格式。
7. 如何处理动态表单中的验证错误？
8. 除了重新填充表单数据之外，还可以使用 Laravel 的 指令在输入字段旁边显示验证消息。这有助于指导用户在验证失败后修复任何错误。
9. 在 Laravel 中管理动态表单输入的最佳方式是什么？
10. 最好的方法是将 Blade 的模板功能与 JavaScript 相结合以生成动态字段。使用 在 JavaScript 中附加新的表单字段和 在 Blade 中检索以前的值。

在 Laravel 10 中处理动态表单需要 Blade 的 old() 帮助器和 JavaScript 的巧妙组合。这种组合可确保用户数据在验证失败后不会丢失，特别是在使用动态生成的字段时。

通过使用 JavaScript 附加表单字段和 Laravel 的内置方法（如 old() 和 @json()），您可以创建流畅、用户友好的体验。正确的验证和错误处理进一步增强了表单提交过程的可靠性。