Javascript 检查元素是否具有特定类，并且是否属于包含特定值的窗体

我需要创建一个验证函数，用于检查某个元素的两个方面：

它有一定的等级

它属于在表单操作上包含部分文本匹配的表单

例如，考虑到以下情况：

<form method="post" action="/page1">
  <div>
    <ul>
      <li><input type="text" id="text1" class="red" /></li>
      <li><input type="text" id="text2" class="red" /></li>
      <li><button id="button1" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2">
  <div>
    <ul>
      <li><input type="text" id="text3" class="red" /></li>
      <li><input type="text" id="text4" class="blue" /></li>
      <li><button id="button2" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

<form method="post" action="/page2andpage3">
  <div>
    <ul>
      <li><input type="text" id="text5" class="red" /></li>
      <li><input type="text" id="text6" class="blue" /></li>
      <li><button id="button3" class="blue">Enter</button></li>
    </ul>
  </div>
</form>

我假设我能够使用并创建以下内容：

function isElementValid(element, color, action) {
 var matchingClass = $(element).hasClass(color);
 var matchingParent = $(element).parents() //....attr('action').contains(action);
 return matchingClass && matchingParent;
}

---

但是我不确定最好的方法是什么来检查家长的行动表格。这是正确的方法还是有更好的方法？

这是最接近的形式吗？我相信你只需要这个：

$（元素）.closest（'form'）.attr（'action'）；

---

文档和其他示例。

要检测元素上的属性是否包含给定值，可以使用选择器。然后，您可以使用结果jQuery对象的

length

属性来确定是否找到了任何内容

您还应该注意，您的逻辑缺少所使用的

元素

ID上的

选择器前缀。试试这个：

函数isElementValid（元素、颜色、动作）{
设$el=$（“#”+元素）；
让matchingClass=$el.hasClass（颜色）；
让matchingParent=$el.closest（`form[action*=“${action}]”）。长度！=0；
返回matchingClass&&matchingParent；
}
log（isElementValid（'text1'，'blue'，'page2'）；//假的
log（isElementValid（'button1'，'blue'，'page2'）；//假的
log（isElementValid（'text3'，'blue'，'page2'）；//假的
log（isElementValid（'text4'，'blue'，'page2'）；//真的
log（isElementValid（'button2'，'blue'，'page2'）；//真的
log（isElementValid（'button3'，'blue'，'page2'）；//正确

进入




进入




进入

JQuery对于如此琐碎的事情真的没有那么大的帮助

请参阅下面代码中的注释

函数isElementValid（元素、颜色、动作）{
//检查元素的类列表，查看是否提供了
//类名在该列表中。还要查找最近的祖先
//窗体并检查其操作，以查看是否包含操作参数。
//返回两个测试是否为真
return element.classList.contains（color）和&element.closest（“form”）.action.indexOf（action）>-1；
}
log（isElementValid（document.getElementById（'text1'），'blue'，'page2'）；//假的
log（isElementValid（document.getElementById（'button1'），'blue'，'page2'））；//假的
log（isElementValid（document.getElementById（'text3'），'blue'，'page2'）；//假的
log（isElementValid（document.getElementById（'text4'），'blue'，'page2'）；//真的
log（isElementValid（document.getElementById（'button2'），'blue'，'page2'））；//真的
log（isElementValid（document.getElementById（'button3'），'blue'，'page2'）；//正确

进入




进入




进入

这仅定位最近的表单，然后返回其

操作

属性值。它不会检查属性值是否与提供的输入部分匹配。您是对的。我正在准备更新，但其他人已经正确地回答了。这似乎不必要地复杂。任何输入/按钮/选择等都可以通过

元素引用其表单。如果您想在IE中运行此逻辑，jQuery非常有用：）您只需调用
.form
，而不是
.closest（“form”）
。一个元素只能属于一种形式。我没有看到任何兼容性图表，但我相信它也是古老的。
function isElementValid(element, color, action) {
 var matchingClass = $(element).hasClass(color);
 var matchingParent = $(element).parents() //....attr('action').contains(action);
 return matchingClass && matchingParent;
}