HTML表单文本框动态信息框？

Question

我最近在 Google 上搜索了我要查找的内容，但我不知道我要查找的内容的正确名称，这使得几乎不可能获得结果。让我试着解释一下：

我在有关表单注册的网站上看到，当用户单击“电子邮件”字段时，旁边会出现一个弹出信息框，上面写着“请输入有效的电子邮件...”和如果用户移动到下一个框并且电子邮件无效，则该框将变为红色并显示类似“请输入有效的电子邮件”。如果电子邮件已被占用，则该框会变为红色并表示已被占用，他们需要输入不同的电子邮件。如果满足所有要求，该框消失，下一个框将弹出询问用户名，检查用户名是否唯一，等等其他字段。最后，当需要输入密码时，它会动态检查密码是否匹配，如果不匹配，则信息框会再次变为红色。

有人明白我要完成什么吗？

Answer 1

我认为您要求的术语是form validation。 网上有无数与此相关的示例，它们是验证表单的许多不同方式。 对于您上面提到的 email 字段，您将需要使用 required 属性（感谢 HTML5，这真的很容易），其中浏览器可用于验证（以有限的方式）电子邮件地址。

基本示例：

Email Address: <input type="email" name="email" required placeholder="Enter a valid email address">

Made-From Scratch 视觉参考

您可以使用基本的HTML 和CSS 来完成。这是我制作的 JSFiddle：http://jsfiddle.net/aZ9r8/331/

Javascript 库

这是http://www.parsleyjs.org 上一个流行的 Javascript 库。