使后端验证与前端验证保持同步

Posted

技术标签:

【中文标题】使后端验证与前端验证保持同步【英文标题】:Keeping backend validation in sync with frontend validation 【发布时间】:2017-07-04 07:42:47 【问题描述】:

很多像 Laravel 这样的框架没有提供任何关于如何进行前端验证的建议。从后端框架来看,这是可以理解的。

但是提前提供 javascript 验证会非常好,这样用户在填写表单时可以立即查看是否有问题。

我知道如何使用 Laravel 之类的东西在后端进行验证,并且我知道如何使用 javascript 在前端进行验证。但是出现的问题是很多框架没有跨越这个前端/后端边界,但我需要让它们的验证彼此同步。

我不能在前端出现不再适用于后端验证的验证错误。人们如何处理这个问题?

人们通常只进行后端验证并将闪存包或错误传递给用户,然后跳过前端验证吗?我觉得尝试保持前端和后端的验证相同可能容易出错并且需要相当多的工作。

编辑

虽然这个问题已经有了答案,但我希望能提供更多的信息。欢迎人们使用什么、自定义解决方案或关于如何有效解决此问题的想法。

【问题讨论】:

我想你可以在你的 php 中编写代码来生成 javascript 以将相同的服务器端规则应用于客户端。 虽然这是一个有趣的问题,但我认为它更适合programmers.stackexchange.com。我想你也会在那里得到更多的答案。如果您决定打开一个问题,请链接到该问题。如果你不这样做,我可能有一天会。 等等,已经有一个了:softwareengineering.stackexchange.com/questions/298537/… 【参考方案1】:

您可以自行同步。将 laravel 验证规则传递给视图并处理它们。有一些这样的例子。

就我而言,我通常会通过简单的前端验证来满足完整的后端验证。只有最小和最大长度。 Front无法检查一个值是否唯一。

https://dotdev.co/form-validation-using-vue-js-2-35abd6b18c5d#.q0r9nkibc

还有另一种方法,但它会稍微增加服务器的负载。首先发送一个带有validate=true 标志的表单,它只验证一个表单。第二个请求一如既往,即验证+操作。它需要一个简单的 js 库来处理它,而不是大规模的重构。

【讨论】:

当您在处理一个小型应用程序时,这很好用,但对于一个包含数十种表单的大型应用程序,事情变化很大,我真的不认为这是一个可行的选择。如果我要更改前端或后端的某些内容,我将不断地记住要让他们的对应部分也保持更新,否则我会慢慢地在整个地方得到不一致的逻辑。即使我们只是在谈论要求检查等。随着时间的推移,这似乎会让人头疼。 至于 js-validation:如果我要更改前端或后端的某些内容,我将必须不断记住更新对应的内容 为什么?您将 ["name" => "required|max:10"] 之类的规则放在一个地方并将其传递给视图。 如果您将这些规则从 PHP 传递给 javascript,那么您已经为它创建了一个当前尚未到位的系统。我希望这些规则也适用于 Javascript 验证。如果验证可以在发送数据之前使用 Javascript 进行检查,则无需发送表单并浪费资源。 嗯,开箱即用是个好主意。但是我们必须自己构建它,因为它不存在......

以上是关于使后端验证与前端验证保持同步的主要内容,如果未能解决你的问题,请参考以下文章

web前端怎么开发短信验证功能

保持 React 基于 Cookie 的身份验证状态

后端验证:@NotNull、 @NotBlank、 @length

前端加后端验证倒计时答题功能实现

ajax基础一

如何使用分离的后端和前端(Passport / Express / React)进行社交身份验证