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

Question

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

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

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

看来我们可以

• 在用户使用时验证并格式化它退出该领域。
• 验证和格式化在输入的每个字符上。
• 拦截击键并防止用户输入错误的字符。
• 上述的一些组合(例如进入时格式化，退出时验证，进入时阻止，退出时格式化等)
• [已添加] 等待并在用户点击提交时执行所有验证和格式设置。

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

[编辑:一些说明]

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

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

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

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

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

Answer 1

Validate and format it when the user exits the field.

是的。如果验证或格式化规则失败，则向用户提供无创反馈。 noninasive 我的意思是不要弹出警报或模式对话框，从而迫使用户单击某些内容。而是动态地在验证或格式化失败的字段附近或下方显示一条消息。

Validate and format on every character entered.

没有。我认为这阻碍了可用性。相反，向用户提供工具提示或其他一些提示，说明格式规则或验证规则是什么。例如。对于“必填”字段，几乎无处不在的星号，对于具有格式的字段，预先告诉用户预期的格式是什么。

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

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

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

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