添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

使用系统自己封装的Validator.js进行表单验证时,错误提示信息的位置不是预期的位置,需要修改底层方法,将错误信息提示在正确的位置;

二、分析问题

1、追踪代码,找到Validator.js中控制错误信息的代码:

1、错误提示信息的错误位置

    g.parentNode.insertBefore(c, g.nextSibling)
    **作用:将拼接的错误提示span元素,插入到要验证的表单元素的nextSibling(返回位于相同节点树层级的下一个节点),即相邻位置;
    **分析:
    01 g为要验证的表单元素input name="user_subscribed_email"
   02 g.parentNode为返回元素的父节点,即input的父节点div class='input-control
      03 c为拼接的错误提示span元素
     04 g.nextSibling为要验证的表单元素的相邻位置
        05 insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
    **作用:将拼接的错误提示span元素,插入到要验证的表单元素的父节点的相邻位置;
    **分析:
     01 g为要验证的表单元素input name="user_subscribed_email"
    02 g.parentNode.parentNode为元素的父节点的父节点,
     即input的父节点div class='input-control的父节点div class='form-row'
     03 c为拼接的错误提示span元素
       04 g.parentNode[1] 验证的表单元素的父节点的父节点的第二个元素位置
        05 insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
        g.parentNode.parentNode.insertBefore(c, g.parentNode[1])
        g.parentNode.parentNode 为错误信息c要插入哪个元素中
        c为要插入的错误元素
  
        g.parentNode[1] 为要插入的位置,这里插入在div class='form-row'的第二个元素的前面,
        即验证的表单元素的父节点的后面,即可达到想要的效果。

     HTML DOM insertBefore() 方法
     ****** insertBefore示例 *****
     nextSibling parentNode和insertBefore的参考:
     HTML DOM Element 对象

var node = parentNode.insertBefore(node, referenceNode) 作用:将node节点插入到referenceNode节点之前,parentNode为对应的父节点。返回值node是插入的node节点本身。 插入新节点 HTML代码 <div id="container"> <h1>标题1</h1>... document.body.insertBefore(rightPanel); 这行代码是为了给Html中增加一个div写的,奇怪的是这行代码在Android5.0以下的版本中跑起来居然没问题,在Android5.0以上的版本中,这段代码是不成功的。 Android... inserBefore,顾名思义就知道是“在某个节点之前插入”。而MDN文档的说法是: Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点 而所谓的“拥有指定父节点”,就是指被参照的节点的父节点就是调用insertBefore方法的节点。 如果给定的子节点是对文档中现有节点的引用,insertBefore()会将其从当... <flow-area v-for="area in data.areaList" @delete-area="deleteArea" :isconnect="isConnect" @change-area="changeArea":id="area.id" :key="area.id" :node="area"></flow-area> <flow-node v-for. 语法:父节点.insertBefore('插入的子节点','指定原有子节点') 由于是在指定的原有子节点前插入新的子节点,因此这个方法的调用者必须是一个父节点,因为所谓“原有的子节点”必须是相对父节点来说。如: <ul class="web-nav" id='gw'> <!-- 父节点 --> <li><a href="#">公司官网</a></li> <!-- 子节点 在上述例子中,先创建一个新的元素节点,再创建一个文本节点,将文本节点添加到创建的元素节点中,通过getElementById获取ul对象, 将新建节点插入到ul对象的第三个元素之前。 注意:ul列表之所以横着写,中间不留空格是因为insert 解决Vue报错:[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.” 一、问题产生原因 因为是在template 包裹的最外层div 上使用了v-if、当不渲染时、不符合VUE语法。 <template&gt.