Angular js - 表单和输入 - ajax 与客户端验证答案

【问题标题】：Angular js - form and inputs - ajax vs client side validationAngular js - 表单和输入 - ajax 与客户端验证
【发布时间】：2014-02-22 20:11:32
【问题描述】：

我想知道为什么我必须在客户端验证表单，而它们无论如何都需要服务器端 (ajax) 验证以防被黑客入侵？

同时进行客户端和服务器端 (ajax) 表单验证有什么好处吗？

我的意思是他们做同样的事情，但 ajax 需要 300 毫秒，而客户端可能需要 0 毫秒，这是进行重复验证的一个很好的理由吗？ :P

另外，使用单个服务器端验证，您可以从客户端删除不需要的 js，我只看到只有 ajax 验证的好处，你呢？

如果我要进行客户端验证，是否有一些方法/实践/逻辑可以遵循以不在服务器端重复验证？仅当客户端验证正常时服务器才执行操作/请求？

其实我的逻辑是：

服务器 + 客户端验证 更少的请求 -> 更多的代码（重复） -> 更多的麻烦 -> 更好的用户体验 服务器端验证（仅限 ajax） 更多请求 -> 更少代码 -> 更少麻烦 -> 可能相同的用户体验！？

对不起 maccheronic 英语 asd :D

【问题讨论】：

您多久发送一次 ajax 请求？他们填写了多少个字段？如果它是一个领域，那么它可能无关紧要。如果是 10，那么一旦我错误地输入了请求的数据，我个人就会想要反馈。在我看来，客户端是关于用户体验的，而服务器端是为了保护你的系统（我相信这可能被视为有点太黑白了）
嗯，我说的是一个非常简单的应用程序，最多 8/9 输入来验证；），我的意思是我同意你的观点，特别是对于有很多请求和很多用户的应用程序，我只是想知道我是否可以避免重复相同的确切验证：/
并非所有连接都以 300 毫秒处理。来自移动设备的连接可能不稳定，因此最好让您的服务器调用尽可能不频繁——无论它们的目的是什么。
@NathanielJohnson 同意这一点:) 我需要更新问题，因为最后我想知道我是否只能使用客户端验证并为某人可以发送的恶意请求做一些服务器端的事情:P
如果您使用的是角度表单，那么您可以在提交之前检查表单是否有效：docs.angularjs.org/api/ng.directive:form.FormController

标签： javascript ajax angularjs validation

【解决方案1】：

您应该将客户端和服务器端验证视为实现不同目标的单独工具。

您绝对应该在服务器端进行验证的原因是因为绝对没有什么可以阻止我手动编辑 Javascript 文件以删除任何客户端验证。即使您的代码被缩小和混淆（两者都可以撤消），您也无法阻止这种情况。

客户端验证之所以不错（但不像服务器端验证那么必要）是因为它实际上帮助用户创建一个将继续通过服务器端验证的表单. AngularJS 可以在每次按键 后轻松验证表单。从用户的角度来看，这很棒。想想所有那些在密码字段旁边有一个“密码强度”表的表单，说强度需要“好”或更好才能通过验证。如果您要在每次按键后进行 ajax 验证调用，您的服务器负载就会增加几个数量级。

这个想法是服务器端验证只会在用户点击“提交”按钮后发生。当用户甚至考虑点击“提交”按钮时，他们应该已经知道他们的表单将通过验证。

但是，让我们开始解决您真正的问题：您只想输入一次验证规则。太棒了！现在你在想DRY! 唯一的问题是这需要在后端使用一些东西来自动生成你的客户端验证，这可能很困难。 另一种方法是让您的前端调用服务器，询问规则，并教您的前端如何解释响应。这将是一个额外的电话，但它应该是一个相对便宜的电话。不幸的是，这是相当多的额外工作。如果您希望您的表单在不久的将来经常更改，这可能是值得的。在这种情况下，能够在一个地方而不是两个地方进行更改将是一个巨大的好处，并且可能值得预先花费额外的时间。

那么，客户端验证是否绝对需要？嗯，这取决于。客户可能非常挑剔，所以如果这是一个真正为您创造收入的表格（银行账户申请表），那么您需要意识到如果某些客户点击“提交”并查看他们的页面，他们可能会关闭您的网页表格到处都是红色。如果他们在问题发生时被告知，而不是一次性告诉他们，这是一种更好的体验。

但是，如果您在截止日期前创建 Intranet 应用程序，那么您可能需要查看优先级并做出判断；）

【讨论】：

如果移动应用程序也在桌面端运行，该怎么办？
我知道你在问什么。这些原则几乎完全适用，而移动应用程序只会夸大使用客户端验证来改善用户体验的需求，因为这些 ajax 调用的本质是不可靠的。
用js收费的APP/WEBAPP比用请求的服务器收费好吗？
啊，我明白你的意思了。 AngularJS 非常轻量级，运行速度非常快，甚至在手机上也是如此。移动设备上的硬件比它们的网络更好、更可靠。移动设备的瓶颈很少是硬件，而是网络，因此您可以采取任何措施来减少所需的网络调用量。
+1 for The alternative could be to have your front end make a call to the server, asking for the rules, and teach your front-end how to interpret the response. ，你能把它加粗吗？

【解决方案2】：

假设您在提交表单时验证了所有可能具有威胁性的输入（例如继续进行 SQL 查询的字段），则所有表单验证都应在客户端执行，因为它可以显着改善用户体验。

我会重申。 这假设您在提交表单时验证了所有可能具有威胁性的输入！ 提出完全绕过验证的请求非常容易，如果您盲目相信客户端验证，您可能会面临以后头疼得很厉害。

要更具体地回答，您真正想要进行AJAX 验证的唯一时间是当您需要在验证之前不能或不应该发送检查的服务器端数据（例如唯一用户名、电子邮件等）

【讨论】：

鉴于您的最后一段，我不确定您是否理解问题的上下文。这被标记为 AngularJS，AngularJS 表单通常不会真正执行真正的“表单提交”。在 AngularJS 应用程序中单击“提交”按钮通常只会创建一个 AJAX 调用，该调用将数据发送到服务器，而无需实际提交和重新加载整个网页。
页面是否重新加载与我的最后一段无关。如果不提出特定请求，您将无法验证唯一的用户名。
好的，我明白你在说什么。当我阅读您的最后一段时，我将其理解为“仅在需要服务器信息时才应使用 Ajax，否则您应该将表单提交到服务器以进行服务器端验证”，这暗示您不应该使用 AJAX提交表格。我现在明白这不是你的意思。
+1 用于提醒唯一用户名和此类字段，这绝对是一个绝对不应该在客户端执行的检查，但仍然显着改善了表单提交前的用户体验