Jquery 显示验证错误消息，如工具提示

如何在html表单上显示验证消息，如下图所示

我在网上试过了，但找不到像这样的验证。所以，尽管我想问你，也许有人能帮我解决这个问题

我想显示valdation错误消息，如下图所示

请任何人帮帮我

---

或者像下图一样

---

---

如果您正在尝试使用自己的javascript，而且您对它还不熟悉，那么需要进行大量的学习，因为您应该了解如何使用DOM元素和了解其他DOM行为。一个快速的解决方案是使用Jquery库和Jquery验证插件。有很多Jquery表单验证程序使用工具提示来显示错误

其中包括：

---

在错误显示上，我会这样做：

• 设置相对于字段父级的位置
• 在字段旁边追加一个绝对定位的div（与字段位于同一父字段中）
• 在div上设置左：100%或右：100%
• 将div的内容设置为错误消息

现在，如果压缩这些步骤，您将得到一个HTML结构，如

<div class="fieldWrapper" style="position: relative;">
    <input ....>
    <div class="errorMessage" style="position:absolute; left:100%;"> Error message </div>
</div>

错误消息

如果不想添加额外的

“fieldWrapper”div

，可以通过编程方式设置错误消息的顶部和左侧，如下所示：

• 获取字段的

  offsetTop

  和

  offsetLeft

• 将该偏移量添加为错误消息的

  顶部

  和

  左侧

  值

---

wow，那条绿色虚线是否意味着验证消息在飞入视图时出现了循环。那太棒了。你的代码在哪里？