触发Javascript表单字段验证和格式化的事件是什么？

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

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

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

看来我们可以

• 当用户 退出场
• 验证和格式化 在输入的每个字符上
• 拦截击键并防止 防止用户输入错误的字符
• 上述各项的某些组合（例如：。 入境时格式化、出境时验证、入境时阻止、出境时格式化等）
• [添加了]等待并在用户单击提交时执行所有验证和格式化

我见过所有这些方法，但我找不到关于什么的信息 从可用性的角度来看，这是最好的（甚至被普遍接受），更重要的是，为什么

[编辑：一些澄清]

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

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

我想我应该把这个问题重新表述为“什么是关于何时验证和何时格式化的传统智慧…？”

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

---

<>强>编辑< /强>：我希望自己的答案能像我一样找到有用的链接。

< P>我发现前三个选项真的很烦人。没有什么比在打字时被打断更糟糕的了。 用户的主要目标是尽可能快地完成表单，而你所做的任何让他们慢下来的事情只是他们完全放弃表单的又一个原因。

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

对于你的手机#，让他们随心所欲地输入，去掉你不喜欢的任何东西，尝试将其重新组合成你想要的格式（（124）567-8901），如果你不能，则抛出一个错误

---

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

这取决于每个字段。但是对于电话号码之类的内容，一般来说，阻止某人输入非数字都很好

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

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

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

---

编辑：同样，考虑你的听众。技术上更精明的人会更愿意接受“动态”。“比如说，表单比那些更习惯于使用非Ajax方式访问互联网的人要好得多。

我将介绍各种选项，但仅仅使用现有的js框架来处理输入掩码可能是有益的

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

另外，当我没有完成输入时，验证消息很烦人，不能在文本字段中输入某个字符是非常烦人的

---

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

我所见过的进行验证的最方便用户的方法是在输入字段旁边显示一个指示器，指示该值无效。这样，您就不会在用户键入时打断他们，但他们可以不断地查看是否键入了有效的条目。我讨厌把信息输入一个长长的表单，结果却让它在最后告诉我“哦，你需要返回并修复字段1”

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

如果您有屏幕不动产，您可以只放置文本，如“有效”或“必须采用XXX-YYY-XXXX格式”

请记住，在执行每次击键验证时，还需要捕获粘贴的文本

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

当用户退出字段时验证并格式化它

对。如果验证或格式化规则失败，则向用户提供非侵入性反馈。所谓非侵入性，我的意思是不要弹出警报或模式对话框，从而迫使用户单击某些内容。而是动态地显示消息