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

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

例如，我们有一个电话号码字段。我们允许数字，空格，括号和连字符。我们希望该字段具有十位数字。另外，即使用户未以这种方式键入，我们也希望该字段看起来像(123)456-7890。

看来我们可以

• 当用户退出该字段时，对其进行验证并设置其格式。
• 验证并格式化每个输入的字符。
• 拦截按键并防止用户输入错误的字符。
• 以上各项的某种组合(例如，进入时的格式和退出时的验证，阻止进入以及退出时的格式等)
• [添加]等待并单击用户单击提交时进行所有验证和格式化。

我已经看到它完成了所有这些方式，但是我找不到有关
从可用性角度来看，最好(甚至是普遍接受)，更重要的是为什么。

[编辑：一些澄清]

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

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

我想我应该将问题重新表述为"关于何时验证以及何时格式化的常规知识是什么？

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

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

解决方案

我发现前三个选项确实很烦人。没有什么比在输入内容时被打断更糟糕的了。

用户的主要目标是尽可能快地通过表格，而我们所做的任何使他们慢下来的事情，仅仅是他们完全放弃表格的另一个原因。

我也讨厌被迫键入信用卡或者电话之类的东西来满足表格要求。只要有可能，只要给用户一个方框即可在其中输入内容，不要让他们处理格式问题。

对于电话＃，让他们随心所欲地输入，剔除我们不喜欢的任何内容，尝试将其放回所需的格式((124)567-8901)，如果我们遇到错误，不能。

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

这取决于每个字段。但是对于电话号码之类的东西，通常可以很好地防止某人输入非数字。

这样，在键入时，我们会注意到1-800-HELLOWORLD电话号码显示不正确，并意识到该字段仅接受数字(我们也可以在输入字段旁边用某种信息字段突出显示该数字)。

在我看来，这比笨拙的模态对话框，弹出式错误字段或者服务器生成的消息显示(在我们完成填写后)更具启发性和友好性。

当然，始终要在最终的客户端验证与最终的技术要求之间建立平衡。例如，如果我们开始在页面提交之前使用Ajax验证图像上传的路径，那可能是一条漫长的路。

编辑：另外，请考虑听众。比起那些更习惯非Ajax互联网方法的人，更具技术意识的人将更加接受"动态"形式。

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

我个人认为退出时进行格式化和验证对用户来说是最不麻烦的。让他们以自己喜欢的格式输入号码(电话号码中有很多这样的格式)，然后将其更改为我们喜欢的格式。当我们可以按照他们的首选格式处理数据时，请不要强迫用户遵循首选项。

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

我能想到的唯一例外是"此值可用"情况(例如创建唯一的用户名)，在这种情况下，立即反馈确实很方便。

我看到的进行验证的最用户友好的方法是在输入字段旁边显示一个指示器，以指示该值无效。这样，我们不会在用户输入时打扰到他们，但他们仍可以不断查看他们是否输入了有效的条目。我讨厌只将信息键入长格式，只是为了让事情最后告诉我"哦，我们需要返回并修复字段1"。

我们可以在用户键入时显示/隐藏指示器。当该值无效时，我会使用一个警告图标，并在该图标上设置一个工具提示，以解释该值为何无效。

如果我们拥有屏幕空间，则可以仅输入诸如"有效"或者"必须采用XXX-YYY-XXXX格式"之类的文本。

请记住，每次按键验证时，我们还需要捕获粘贴的文本。

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

Validate and format it when the user exits the field.

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

Validate and format on every character entered.

不，我认为这会妨碍可用性。而是向用户提供有关格式规则或者验证规则是什么的工具提示或者其他提示。例如。对于"必填"字段，实际上是无处不在的星号；对于具有格式的字段，请提前告诉用户期望的格式是什么。

Intercept keystrokes and prevent the user from entering characters that are wrong.

如果要防止用户输入无效字符，请告诉用户为什么我们非侵入性地阻止了他们的输入。另外，请勿窃取该领域的焦点。

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

• 提前通知用户验证和格式设置规则。
• 不要以为用户是盲人，因此请牢记Web的可访问性和屏幕阅读器。 (除非我们正在开发目标受众有限的网站，例如Intranet。)
• 向用户提供非侵入性反馈，这意味着不要使用户在每次失败时都单击警报框或者模式对话框。
• 明确指出哪个输入框未通过验证或者格式化规则，并告诉用户输入失败的原因。
• 提供反馈时，请勿窃取鼠标/指针焦点。
• 请记住制表符的顺序，以便面向键盘的用户填写字段时，他们可以单击制表符并转到下一个逻辑输入/选择字段。

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

A)应该在用户退出字段时进行格式更改。很快就很烦人，后来又根本无法显示更改的目的。

B)在退出字段或者提交表单时最适当地执行验证。很快让用户感到沮丧和困惑。在一个长且复杂的形式中，有多个屏幕，我希望在退出控件时进行验证，以使更容易进行校正。简而言之，我会在提交时这样做，以免破坏填写表单的流程。这确实是一个判断电话，因此请尽可能与实际用户进行测试。

最好还是以实际用户来测试工作，但是如果我们没有预算或者访问权限，那么快速而肮脏的"用户"测试可以帮助做出类似这样的决定。我们可以抓住一小部分没有使用该软件的人(尽可能与最终用户匹配)，并要求他们填写表格。指示他们输入特定内容以获取错误，然后看着他们纠正错误。让他们大声谈论他们在做什么，这样我们就不必猜测他们的思考过程了。寻找在哪里有问题，什么似乎最使他们困惑/烦恼。

对于可用性最佳实践，我建议阅读"如何设计完美的表单(更准确地说是上下文和协助)"和"漂亮的表单"。

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

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

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

Web表单中的在线验证by Luke Wroblewski