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

我最近在谷歌上搜索了几次我要找的东西，但我不知道我要找的东西的正确名称，这几乎不可能得到结果。让我试着解释一下：

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

---

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

我想你要的术语是

表单验证。
在线上有无数与此相关的例子，它们是验证表单的许多不同方式。
对于上面提到的
email
字段，您需要使用
required
属性（多亏了HTML5，这非常简单），在该属性中，浏览器可以用来验证（以有限的方式）电子邮件地址。


基本示例：

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

电子邮件地址：

从头开始的视觉参考


您可以使用基本的
HTML
和
CSS
来完成。下面是我制作的一个JSFiddle


Javascript库


这是一个流行的Javascript库。
这是解决我问题的一种方法，但我希望有一种更直观的方法。如果我能找到一个提供我想要的服务的例子，我会把它链接起来。你所说的“可视化”方法是什么意思？您的意思是显示指示输入是否有效的显示器吗？是的！我正在寻找小的彩色信息框，以便在获得焦点时显示在表单字段的右侧。@Configure-我完成了视觉参考。如果您接受我的答案，请检查我的答案，以便其他人可以查看。您理解我的问题的概念，但我正在寻找一个内置的专业框库，该框具有打开/关闭动画、颜色属性和动态性。如果你能给我指出去这样一个图书馆或服务的正确方向；这就是我要找的。