使用 Laravel Collective、Bootstrap 模型和 JavaScript 的客户端表单验证和路由？

Posted 2023-03-14

【中文标题】使用 Laravel Collective、Bootstrap 模型和 JavaScript 的客户端表单验证和路由？

【英文标题】：Client Side Form validation AND routing using Laravel Collective, Bootstrap Model, and JavaScript?

【发布时间】：2020-07-02 02:30:19

【问题描述】：

我想为我目前正在帮助的一家小型企业创建一个更好的网络输入系统。

我决定使用 Laravel，因为我以前使用过它，并且最初创建了一个简单的 Employee 表单（使用 Laravel Collective），它要求某些 Employee 字段。例如姓名、年龄、性别、部门、办公室等

现在，我想让员工个人资料成为“缓慢变化的维度”。这意味着，如果用户决定在 Blade Edit 视图中更改 某些 字段，而不是仅仅点击提交按钮，并让 Update 控制器验证和更新记录。有没有办法，在编辑视图本身：

如果说，它检测到 Department 或 Office 字段发生了变化，当用户点击提交按钮时，a 可以显示一条短消息（在弹出的 Bootstrap Modal 或类似的东西中），上面写着：

“我们注意到员工的'部门'和'办公室'属性发生了变化。如果这是对当前记录的先前错误的更正，请单击“编辑当前记录”按钮。（控制器将更新当前记录，我知道怎么做该员工的新记录，并将新创建记录的“current_flag”状态标记为“是”，并将旧记录的“当前标记”状态标记为“否”）

其次，与这一切类似。有没有一种方法可以包括表单字段的客户端验证（使用 javascript 或在 laravel 集体系统中），以检查必填字段或在另一个日期字段上或之后的数据字段。类似的东西。在控制器功能执行之前，它会进行检查。

如果我以正确的方式考虑上述问题，请告诉我，这些东西在 Laravel 中是否可行，或者我是否应该使用其他更擅长这方面的软件。由于我刚刚开始/处于非常早期的学习阶段，我宁愿测试一下并立即获得它，而不是构建无法扩展或以后无法工作的东西。

非常感谢！

萨钦

【问题讨论】：

这可以用 Vue.js 之类的东西来完成。那是一个 js 框架，它已经高度集成在 Laravel 中。也许在 javascript 部分问这个问题。

啊，抱歉...我可以看到您已经将其标记为 js 问题。

【参考方案1】：

是的，你提到的一切都是可行的，而且很常见。但是，由于这是一个非常广泛的问题，我不能说得更具体。

对于您的第一个问题，您可以按您说的做：显示一个带有问题的弹出窗口，并根据用户的选择将您的请求发送到不同的 API 端点。因此，例如，如果用户决定更新记录，您将请求发送到 /user/update 等等。

至于第二个问题，是的，同时进行客户端和服务器端验证是很常见的。但是，这意味着您必须编写两次相同的代码，这会很快变旧（尤其是如果您有很多表单）。 很多人只有服务器端验证，只是向客户端显示错误。另外，在将数据保存到数据库之前，您应该始终仅依赖服务器端验证。

话虽如此，正如 Ulric McArdle 在 cmets 中提到的那样，VueJS 是一个非常流行的前端框架，并且有很多资源可以将其与 Laravel 集成。

【讨论】：

谢谢。我只是想知道从哪里开始以及如何开始。我正在寻找一些 Vue JS，它会在加载编辑表单时比较字段的值，然后在按下提交按钮时比较字段的值，并在弹出窗口中显示适当的消息传递和路由按钮向上。 （以及一些基本客户端验证的 Vue JS - 也许你不能为此使用 laravel 集体语法）。如果您知道已经这样做的网站的任何特定资源。将感激不尽。我是一个“慢慢改变”的记录的概念并不少见。

【参考方案2】：

我能够使用以下语法在表单本身中包含验证。

<div class ="form-group">
   !! html::decode(Form::label('first_name','<strong>First Name:</strong>')) !!
  Form::text('first_name', old('first_name'), ['class' => 'form-control '.($errors->has('first_name') ? 'is-invalid': ''), 'placeholder' => '', 'required'])
</div>

但不太完全理解这个位的作用：

.($errors->has('first_name') ? 'is-invalid': '')

我已经在数组末尾有一个“必需”参数。

上面的代码是我在网上查到的，只是把上面的代码复制进去了，不过是部分代码我没完全看懂。

有什么想法吗？

【讨论】：

是解决方案吗？为什么要向我们征求意见？

抱歉，这不是征求意见的问题。问题是要问代码的这个特定部分是什么意思：.($errors->has('first_name') ? 'is-invalid': '')。谢谢

那么，如果您还有其他问题，也许您应该创建一个新问题。当您在解决方案中提出其他问题时，很难理解您的建议。

当然。我再补充一个问题！