表单验证失败提示方案（自用）

方案

动态计算定位，fixed于失败项附近，并定时消失，多个提示一同显示。

遇到问题

当表单处于dialog中，并且表单高度大于dialog高度，验证失败项又刚好在被overflow隐藏的部分，需要对这部分提示做特殊处理，暂且处理为不显示这部分提示。问题如图：

解决问题

• 判断是否处在dialog中
• 判断验证失败项是否在overflow隐藏部分

判断是否处在dialog中

function nodeParents (elm, cls) {
  let parent = elm.parentNode
  while (parent && !parent.classList.contains(cls)) {
    parent = parent.parentNode
  }
  return parent
}

判断验证失败项是否在overflow隐藏部分

function visibleInDialog (elm, parent) {
  const rect1 = elm.getBoundingClientRect()
  const rect2 = parent.getBoundingClientRect()
  return rect1.bottom < rect2.bottom && rect1.top > rect2.top
}

最终

const dialog = nodeParents(elm, 'dialog')
if (dialog && visibleInDialog(elm, dialog) || !dialog) {
    errorTip(tip)
}