实时表单验证打动您的Web访问者

在线表格

作为Web应用程序用户,通常给您的第一印象是填写Web表单时。 令我感到惊讶的是,那里的Web表单的验证次数为零,或者等待您提交表单内容,然后再告诉您可能遇到的问题。

我的经验法则是,任何未经验证的内容均受支持。 在提交表单之前,任何可以验证的内容都必须是有效的。 随着Ajax的出现,您甚至可以在提交之前针对数据库验证数据。 不要选择偷懒的路线-用户会感谢您的帮助!

下面是一些例子:

  1. 电子邮件地址 –我不介意让您两次填写电子邮件地址来验证它们的表单,但是它们不告诉您它们是否匹配或构造正确的事实是不可原谅的。
  2. 密码 –如果要让我输入两次密码,请在发布表单之前验证值是否相同。
  3. 密码强度 –如果您要求一定的密码强度(字母数字字符或大小写的组合),请在输入密码时为我提供一些反馈。不要等我提交后再告诉我密码输入失败。
  4. 蜜枣 –如果您希望使用am / d / yyyy格式的日期,请允许我输入这些值并适当地设置其格式,从而在单个字段中输入信息。 如果您想要前导零,则将其放在后面。 可以显示一种格式并将另一种格式保存在数据库中。
  5. 今天的日期 –为我填写! 为什么要问我填写日期呢?
  6. 日期格式 –如果您有国际申请,则可以基于应用程序的国际化默认日期格式。 当然,最好有一个选项供用户覆盖该选项并选择自己的选项。
  7. 社会保障号码 –添加一些自动从字段跳到字段或以编程方式在值之间插入短划线的javascript相当简单。
  8. 电话号码 –考虑到国际化,也可以通过格式化界面中的电话号码来简化这些类型的字段,但是将其保存为对后端高效的另一种格式。 不要让用户输入括号,空格和破折号。
  9. 最大文字长度 –如果您限制数据库中存储的字符数,那么不要让我输入那么多字符! 它甚至不需要困难的验证……这只是文本框上的设置。
  10. 最小文字长度 –如果您需要最小文本长度,请发出警报,直到我有足够的字符。

这是来自的密码强度功能的示例 极客智慧:

输入密码:

更新:10年26月2007日–我找到了一个带有JavaScript库的简洁资源,可以下载 表单验证,称为LiveValidation.

16条评论

  1. 1

    我同意这些是表单的重要功能,但是说不执行前端 javascript 验证是“不可原谅的”更多的是个人观点。 我喜欢在 javascript 中工作,并且已经编写了一些非常简洁的编辑掩码来完成您谈论的一些事情,但是其中很多都不是微不足道的,而且许多 javascript 表单验证包都有很多大漏洞。 不是每个人都会花时间用(通常)更复杂的前端 javascript 验证来复制他们的后端验证。

    好点,但在我看来,绝对不是每个在线表格都“需要”的东西。

  2. 2

    密码检查器相对损坏。 如果密码很长,任何密码都足够好。

    例如:

    这真的是一个平庸的密码吗?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    对我来说,最好的表单验证是当你给用户一个客户端验证的印象,而它是 AJAX/服务器端验证。
    您只需将一些事件处理(keyup、blur、click 等)附加到表单元素,通过 AJAX 将整个表单发布到服务器,调用返回相应错误消息的“检查”函数(这个密码也是很简单,那个日期格式错误,等等……)
    当用户最终通过单击提交按钮发布表单时,您仍然可以使用“检查”服务器端功能在将数据插入数据库或其他过程之前最后一次验证表单。
    这样,用户对 onthego 验证感到满意,而开发人员对仅服务器端的验证开发感到满意。

    • 5
      • 6

        没那么快道格——我同意你最初的前提,即这些有用的功能,比如动态格式化 SSN 是微不足道的。 当你可以修复它而不必猜测格式时,它懒得只是发布一条错误的消息。

        但是,我也同意 Nicolas 关于将服务器端逻辑与 AJAX 结合使用的观点。

  4. 7

    你的标题是“打动你的朋友……”但你在这 2 分钟内没有给我留下深刻印象,电话是邮寄的。

    重写你的标题(太误导了,让人认为有正在讨论的例子和实践)。

    如果人们还没有在他们的表单中这样做,那么他们只是在学习,或者表单不够重要,无法使用验证。

    真正的 web 程序员已经知道这一点并且会去做。

    • 8

      周杰伦

      对于那个很抱歉! 我的观点绝对不是提供开发人员反馈——我真的是从产品经理的角度来的。 我同意你的看法——但有趣的是其他一些开发者不同意! 我认为这很不幸。

      感谢您抽出宝贵的时间!
      道格

  5. 9

    我完全同意验证是任何应用程序的必要组成部分。 作为团队负责人,我通常会因为缺少验证或限制文本输入长度等原因将代码发回“完成”。

    对于我所做的大多数事情,我发现在正常情况下以及如果用户按照我的意图使用系统,大约需要 50% 的时间才能让某些东西正常工作。 其他 50% 的开发时间来自检查他们的输入,确保数据完整性得到维护,并使表单字段不允许输入恶意数据。

    我写了一篇关于如何在我的 hava swing 应用程序中使用 InputVerifiers 的帖子,并展示了我如何验证电子邮件文本字段。 我使用的正则表达式很容易修改以验证电话号码、邮政编码、SSN 等。

    我的博文在 http://timarcher.com/?q=node/36

    好文章道格!

  6. 10

    我同意。 密码非常重要,必须认真对待。 我认为几乎所有表格都输入两次密码是正常的,但没有显示两个密码的有效性表明它没有被认真考虑。

  7. 11

    我同意客户端验证可以是一个非常用户友好的功能。 但是,更重要的是确保验证本身确实有意义。

    您提供了一个很好的例子,说明验证如何误导用户,更糟糕的是,将他们赶出我们的网站:

    Geek Wisdom 的密码强度验证来自考虑 tZhKwnUmISS 成为弱密码。 这不仅是一个非常强大的密码,而且还会疏远用户,因为它给他们一种错误的印象,即使用此密码登录您的网站会在某种程度上不安全。

    简单地提示用户一个好的密码至少有六个字符长并且应该包含数字和字母会更好(也更容易)。

    其他有问题的验证包括需要一定最小长度或可能不包含空格的用户名。 用户名有什么问题 X, 李四, 甚至 #*!§? 我可以处理。

  8. 12

    我同意你的看法。 有些表单看起来不错,但它没有提供良好的验证。 提供了个人信息,只有像纸质版的任何商业表格一样认真对待它才是正确的。

  9. 13
  10. 14
  11. 15

    我觉得你发布关于提供实时表单验证的好处有点有趣,但是,你在帖子底部的评论表单没有提供这些……

    我意识到您正在使用 WordPress 将您的想法发布到互联网上,但也许确保您实践您所宣讲的内容也不是一个坏主意。 🙂

    顺便说一句,好帖子,即使我不一定同意你写的所有内容。

    • 16

      嗬! 你打败了我,阿曼达! 我真希望我有时间做更好的表单验证并将其集成到 WordPress 中。 我特别喜欢 Adobe Spry 验证框架,并希望看到有人将两者集成!

      谢谢! (而且我一直很欣赏对任何主题都有多种意见)。
      道格

你觉得呢?

本网站使用Akismet来减少垃圾邮件。 了解您的数据如何处理.