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

CoyPan 发布于2019-08-23 14:01 / 3454人阅读

摘要：方案动态计算定位，于失败项附近，并定时消失，多个提示一同显示。遇到问题当表单处于中，并且表单高度大于高度，验证失败项又刚好在被隐藏的部分，需要对这部分提示做特殊处理，暂且处理为不显示这部分提示。

方案

动态计算定位，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)
}

云服务器私有云提示，html5的表单验证表单提示表单错误提示 asp提交表单提示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99945.html

H5: 表单验证失败的提示语

摘要：前言前端的童鞋在写页面时都不可避免的总会踩到表单验证这个坑这时候我们就要跪了因为要写一堆来检查但是自从出现后很多常见的表达验证它都已经帮我们实现了让我们减轻了很多负担就好像下面的邮箱地址验证邮箱邮箱验证是自身支持的但是我们要验证的场景和情前言前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后,...

callmewhy 2019-08-21 11:47 评论0 收藏0
vuelidate 对于vueJs2.0的验证解决方案

摘要：介绍在后端项目里比如我们的框架对于表单验证有自己的一套机制他将验证集成在我们只需要在我们的方法中依赖注入我们自己实例化后的验证类当然也可以直接去在方法里去验证表单数据而在我们的前端的项目里也就是在我们的项目里也有比较好的验证解决方案也就是这介绍在后端项目里比如我们的Laravel框架对于表单验证有自己的一套validation机制他将验证集成在FormRequest 我们只...

zhangwang 2019-06-27 15:39 评论0 收藏0
HTML5中的表单

摘要：注意约束验证不支持表单中的元素若想基于表单的验证结果来改变按钮的样式，可以使用伪类。约束验证的语法下列语法中的条目用于为表单数据指定约束。这些特性指定了当表单提交时不做验证。在表单相关元素上属性，如果元素的约束没有被符合则值为。相对于 HTML4 来说，HTML5中的元素与特性提供更大程度上的语义标记，同时还删除了大量在 HTML4 中因为脚本与样式缘故而存在的冗余元素。通过让表单在...

Pocher 2019-08-01 15:56 评论0 收藏0