10

首先让我说，我们验证服务器端的每个字段，所以这是一个关于客户端可用性的问题。

关于何时使用 javascript 验证和格式化 html 表单输入字段的传统智慧是什么？

例如，我们有一个电话号码字段。我们允许使用数字、空格、括号和连字符。我们希望该字段有十位数字。此外，我们希望该字段看起来像 (123) 456-7890，即使用户没有那样键入它。

好像我们可以

  • 当用户退出该字段时对其进行验证和格式化。
  • 对输入的每个字符进行验证和格式化。
  • 拦截击键并防止用户输入错误的字符。
  • 以上的一些组合（例如，进入时的格式和退出时的验证，进入时的阻止和退出时的格式等）
  • [新增] 当用户点击提交时，等待并做所有的验证和格式化。

我已经看到它以所有这些方式完成了，但我无法从可用性的角度找到关于什么是最好的（甚至是普遍接受的）的信息，更重要的是，为什么。

[编辑：一些澄清]

我们绝对不会强制执行任何格式标准。当我说格式时，我的意思是我们将使用 javascript 来重写东西，使它们看起来不错。如果用户键入 1234567890，我们将其更改为 (123) 456-7890。没有可能失败的“格式化规则”。

我将此与验证区分开来，因为如果他们没有输入足够的数字，我们必须让他们修复它。

我想我应该将这个问题改写为“关于何时验证以及何时格式化......的传统智慧是什么？

到目前为止，答案中的信息很好！

编辑：我在下面接受我自己的答案，希望其他人会发现这个链接和我一样有用。

4

9 回答 9

2

当用户退出该字段时对其进行验证和格式化。

是的。如果验证或格式化规则失败，则向用户提供非侵入性反馈。我的意思是不弹出警报或模式对话框，从而迫使用户单击某些东西。而是在验证或格式化失败的字段附近或下方动态显示消息。

对输入的每个字符进行验证和格式化。

不，我认为这会妨碍可用性。而是向用户提供关于格式规则或验证规则是什么的工具提示或其他提示。例如，对于“必填”字段，几乎无处不在的星号，对于带有格式的字段，预先告诉用户预期的格式是什么。

拦截击键并防止用户输入错误的字符。

如果您要阻止用户输入无效字符，请以非侵入性的方式告诉用户您刚刚阻止他们输入的原因。另外，不要窃取该领域的焦点。

所以对我来说，一般原则是：

  1. 预先通知用户您的验证和格式化规则。
  2. 不要假设用户有视力，因此请牢记 Web 可访问性和屏幕阅读器。（除非您正在开发目标受众有限的网站，例如 Intranet。）
  3. 为用户提供非侵入性反馈，这意味着不要让用户在每次失败时单击警报框或模式对话框。
  4. 明确哪个输入框未通过验证或格式化规则，并告诉用户输入失败的原因。
  5. 提供反馈时，不要窃取鼠标/指针焦点。
  6. 记住制表符顺序，这样当面向键盘的用户完成一个字段时，他们可以点击制表符并转到下一个逻辑输入/选择字段。
于 2008-09-22T19:15:15.877 回答
1

我将描述各种选项，但仅使用现有的 js 框架来处理输入掩码可能是有益的。这是各种选项的一个很好的总结

于 2008-09-22T18:54:31.873 回答
1

bmb 声明他们接受任何格式，并将其更改为所需的格式 (xxx) nnn-xxxx。这是非常好的。问题是 A) 格式更改和 B) 验证的时间安排。

A) 格式更改应在用户退出该字段时完成。越快越烦人，越晚就完全违背了显示变化的目的。

B) 验证最适合在退出字段或提交表单时执行。Sooner 让用户感到沮丧和困惑。在一个冗长而复杂的表单中，有多个屏幕，我倾向于在退出控件时进行验证，以便更轻松地进行更正。在简短的表格上，我会在提交时完成，以避免破坏填写表格的流程。这确实是一个判断电话，所以如果可能的话，请与真实用户一起测试。

无论如何，您最好还是与真实用户一起测试您的工作，但是如果您没有预算或访问权限，那么快速而肮脏的“用户”测试可以帮助做出这样的决定。您可以找一些没有使用该软件的人（尽可能与您的真实最终用户匹配）并要求他们填写表格。指示他们专门输入内容以获取错误，然后看着他们纠正它。让他们大声说出他们正在做什么，这样您就无需猜测他们的思维过程。寻找他们有问题的地方以及最让他们感到困惑/恼火的地方。

于 2009-09-17T19:11:52.763 回答
1

到目前为止，最好的答案不是答案，而是评论（见上文。）我将其添加为答案，以防有人在评论中错过它。

请参阅以下关于 A List Apart 的文章。

Luke Wroblewski 的 Web 表单中的内联验证

于 2009-11-20T21:43:52.977 回答
0

我发现前三个选项真的很烦人。没有什么比在打字过程中被打断更糟糕的了。

您的用户的主要目标是尽可能快地完成表单，而您所做的任何减慢他们速度的事情只是他们完全放弃它的另一个原因。

我也讨厌被迫输入诸如信用卡#或电话#之类的东西，这正是满足表格的正确格式。只要有可能，就给用户一个输入框，不要让他们处理格式。

如果是你的手机#，让他们随意输入，去掉你不喜欢的任何东西，试着把它重新组合成你想要的格式（（124）567-8901），如果你抛出错误不能。

如果您绝对必须以特定格式验证某些内容，请在他们提交表单时执行此操作，然后突出显示有问题的字段。

于 2008-09-22T18:52:28.710 回答
0

这取决于每个字段。但是对于像电话号码这样的东西，阻止某人甚至输入非数字通常非常好。

这样，在键入时，您会注意到您的 1-800-HELLOWORLD 电话号码未正确显示，并意识到该字段只接受数字（您也可以在输入字段旁边使用某种信息字段突出显示）。

在我看来，这比在您完成填写后显示的尴尬模式对话、弹出错误字段或服务器生成的消息显示更加直观和友好。

当然，始终在最终的客户端验证与构建它的最终技术要求之间取得平衡。如果您开始在页面提交之前使用 Ajax 验证图像上传，那可能是一条很长的路。

编辑：另外，考虑你的听众。与更习惯于 Internet 的非 Ajax 方法的人相比，更有技术头脑的人会更容易接受“动态”形式。

于 2008-09-22T18:54:05.273 回答
0

就我个人而言，我认为在退出时格式化和验证对用户来说是最不麻烦的。让他们以他们喜欢的任何格式输入号码（电话号码有很多这样的格式），然后将其更改为您喜欢的格式。当您可以以他们喜欢的格式处理数据时，不要强迫用户符合您的偏好。

此外，当我没有完成输入时的验证消息很烦人，而且无法在文本字段中输入某个字符也很烦人。

我能想到的唯一例外是“这个值是否可用”的情况（例如创建一个唯一的用户名）——在这种情况下，即时反馈真的很方便。

于 2008-09-22T18:55:58.607 回答
0

我见过的最用户友好的验证方式是在输入字段旁边显示一个指示器，以指示该值无效。这样您就不会在用户输入时打断他们，而且他们可以不断地查看他们是否输入了有效的条目。我讨厌不得不将信息输入一个长格式，只是让事情在最后告诉我“哦，你需要回去修复字段 1”。

您可以在用户键入时显示/隐藏指示器。当值无效时，我会使用警告图标，并在图标上设置工具提示来解释值无效的原因。

如果您有屏幕空间，您可以只输入诸如“有效”或“必须采用 XXX-YYY-XXXX 格式”之类的文本。

请记住，当您进行每次击键验证时，您还需要捕获粘贴的文本。

除此之外，您还应该首先防止输入无效的击键。

于 2008-09-22T18:58:34.233 回答
0

对于可用性最佳实践，我建议阅读How To Design The Perfect Form（更准确地说是Context & Assistance）和Beautiful Forms。

对于表单验证框架，请检查fValidator和iMask组合，它们是互补的，因此可以完美地协同工作。

于 2009-09-17T19:44:40.733 回答