首先我要说的是，我们验证服务器端的每个字段，所以这是一个问题 关于客户端可用性。
使用javascript验证和格式化html表单输入字段时的传统智慧是什么？
例如，我们有一个电话号码字段。我们允许数字，空格，括号和连字符。我们希望该字段有十位数。此外，我们希望该字段看起来像（123）456-7890，即使用户没有这样输入。
好像我们可以
我已经看到它完成了所有这些方法，但我无法找到有关什么的信息 从可用性的角度来看，最好（甚至普遍接受），更重要的是，为什么。
[修改：一些澄清]
我们绝对不会执行任何格式标准。当我说格式时，我的意思是我们将使用javascript重写事物，使它们看起来很好。如果用户键入1234567890，我们将其更改为（123）456-7890。没有可能失败的“格式化规则”。
我将此与验证区分开来，因为如果他们没有输入足够的数字，我们必须让他们修复它。
我想我应该将这个问题改写为“什么是关于确切何时验证以及何时格式化的传统智慧？？
到目前为止，答案中的信息很好！
编辑：我接受下面的答案，希望其他人能发现这个链接和我一样有用。
答案 0 :(得分：2)
当用户退出该字段时验证并格式化它。
是。如果验证或格式规则失败，请向用户提供非侵入性反馈。通过无意义的意思是不要弹出警报或模态对话框，从而迫使用户点击某些东西。而是在验证或格式化失败的字段旁边或下面动态显示消息。
对输入的每个字符进行验证和格式化。
没有。我认为这会妨碍可用性。而是向用户提供工具提示或其他提示，说明格式规则是什么或验证规则是什么。例如。对于“必需”字段，实际上无处不在的星号，对于具有格式的字段，预先告诉用户预期的格式是什么。
拦截击键并防止用户输入错误的字符。
如果您要阻止用户输入无效字符，请告知用户您为什么只是非侵入性地阻止了他们的输入。此外，不要窃取该领域的焦点。
所以对我来说，一般原则是：
答案 1 :(得分：1)
我将描述各种选项，但仅使用现有的js框架来处理输入掩码可能是有益的。 Here is a good run down of various options
答案 2 :(得分：1)
bmb表示他们接受任何格式，并将其更改为所需的格式（xxx）nnn-xxxx。这是非常好的。问题是A）格式变化的时间，以及B）验证。
A）格式更改应在用户退出字段时完成。很快就会很烦人，后来甚至无法显示变化的目的。
B）验证最适合在退出现场或提交表格时执行。很快就会让用户感到沮丧和困惑。在一个长而复杂的形式中，有多个屏幕，我倾向于在退出控件时进行验证，以便更正。在简短的表格上，我会在提交时这样做，以避免打破填写表格的流程。它实际上是一个判断调用，所以尽可能用真实用户进行测试。
最好是你正在测试你的真实用户的工作，但是如果你没有预算或访问权限，那么快速而肮脏的“用户”测试可以帮助做出像这样的决定。您可以抓住少数未使用该软件的人（尽可能与您的真实最终用户匹配）并要求他们填写表单。指示他们专门输入内容以获取错误，然后观察它们是否正确。让他们大声说出他们正在做的事情，这样你就不必猜测他们的思考过程。寻找他们遇到问题的地方以及最让他们感到困惑/烦恼的事情。
答案 3 :(得分：1)
到目前为止，迄今为止最好的答案不是答案，而是评论（见上文）。我将其添加为答案，以防有人在评论中遗漏它。
请参阅以下关于A List Apart的文章。
答案 4 :(得分：0)
我发现前三个选项真的很烦人。没有什么比在打字的过程中被打断更糟糕了。
您的用户的主要目标是尽可能快地浏览表单，而您做的任何事情都会让他们放慢速度只是他们完全放弃它的另一个原因。
我也讨厌被迫输入类似信用卡的东西＃或电话＃是完全正确的格式来满足表格。只要有可能，只需给用户一个输入内容的框，不要让他们处理格式化。
对于你的手机号码，让他们按照自己的意愿输入，删除你不喜欢的任何东西，尝试将其重新组合成你想要的格式（（124）567-8901）并投掷一个如果你不能错误。
如果您绝对必须对特定格式进行验证，请在提交表单时执行此操作，然后突出显示有问题的字段。
答案 5 :(得分：0)
这取决于每个领域。但是对于像电话号码这样的东西，通常可以防止有人甚至输入非数字。
这样，在输入时你会注意到你的1-800-HELLOWORLD电话号码没有正确显示并意识到该字段只接受数字（你也可以在输入旁边用某种信息字段突出显示）字段）。
在我看来，在完成填写之后，我觉得比一个笨拙的模态对话，弹出式错误字段或服务器生成的消息显示更加直观和友好。
当然，始终要将最终的客户端验证与构建它的最终技术要求进行平衡。如果您在页面提交之前开始使用Ajax验证图像上传的路径，那么这可能是一条漫长的道路。
编辑：另外，请考虑您的受众群体。技术意识越强的人就越会接受“动态”形式，而不是那些习惯于非Ajax的互联网方式的人。
答案 6 :(得分：0)
我个人认为退出时格式化和验证对用户来说是最不麻烦的。让他们以他们喜欢的任何格式输入数字（并且电话号码中有很多这些），然后将其更改为您喜欢的格式。 当您可以按首选格式处理数据时，请勿强制用户遵守您的偏好。
另外，当我没有打字时验证消息很烦人，并且无法在文本字段中放置某个字符是非常烦人的。
我能想到的唯一例外是“这个值是否可用”情况（例如创建一个唯一的用户名） - 在这种情况下，即时反馈非常方便。
答案 7 :(得分：0)
我见过的最友好的用户验证方法是在输入字段旁边显示一个指示符，表示该值无效。这样，您不会在用户输入时中断用户，但他们可以不断查看用户是否输入了有效条目。我讨厌将信息输入一个长形式只是为了让事情最后告诉我“哦，你需要回去修理字段1”。
您可以在用户输入时显示/隐藏指标。当值无效时我使用警告图标，并在图标上设置了一个工具提示，解释了该值无效的原因。
如果你有屏幕空间，你可以放置诸如“有效”或“必须格式为XXX-YYY-XXXX”的文字。
请记住，每次按键验证时，您还需要捕获粘贴的文本。
除此之外，您还应该首先防止输入无效的击键。
答案 8 :(得分：0)
对于可用性最佳做法，我建议您阅读How To Design The Perfect Form（更准确地说是Context & Assistance）和Beautiful Forms。
对于表单验证框架，请检查fValidator和iMask组合，它们是互补的，因此可以完美地协同工作。