判定是否为表单元素

最新推荐文章于 2022-06-09 20:42:13 发布

cheng5128

最新推荐文章于 2022-06-09 20:42:13 发布

阅读量639

点赞数

文章标签： button input function action div jquery

本文链接：https://blog.csdn.net/cheng5128/article/details/5297387

版权

发现jQuery1.41的一个bug，John Resig在实现他的事件代理系统（live）时，需要对当前元素进行判定，判定其是否为表单元素。


var formElems = /textarea|input|select/i;

//**********
formElems.test( elem.nodeName)

但很明显，他忘记了button标签。我不知其他人怎样用它，我在设计一个站内短信系统时，把用它来区分是群发，还是丢到垃圾箱什么的。要修正这个bug很容易，就是补上button字段，但我想出另一个更严谨的判定：


       var isFormElement = function(obj){
        return !!(obj.tagName && "name" in obj && "form" in obj);
      }

首先我们判定其是否为元素节点，用的是tagName。在IE下，注释节点也有tagName，永远为"!"，不过没关系，后面的条件能剔除它。然后判定其原型中是否存在name属性，a标签也有name属性，不过没关系。最后判定其原型是否存在form属性，表单元素都有一个form属性，指向其最近的祖先form标签。不过表单元素不单止input标签，select标签，textarea标签，button标签，还有label标签，fieldset标签，legend标签，HTML5还新增了output标签，datalist标签，谁晓得以后还加什么东西。但现在可以知道，label，fildset，legend是不会在提交时添加什么东西。(我们在提交时，会生成一个queryString，以name=value&name2=value2的形式提交到后台，name属性就在此时发挥作用了)。因为它们三个都没有name属性，因此我们可以把它们区别开去！

最后，我们拿以下页网验证一下：


<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>isFormElement by 司徒正美</title>
  </head>
  <body>
    <!--这是注释节点//-->

    <form  action="">
      <fieldset>
        <legend>表单</legend>
        <select name="aaa">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <label for="bbb">
          <input type="text" name="bbb">
        </label><br/>
        <textarea name="ccc">司徒正美</textarea>
        <div ><button type="submit" name="ddd">提交</button></div>

      </fieldset>

    </form>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      var isFormElement = function(obj){
        return !!(obj.tagName && "name" in obj && "form" in obj);
      }
      
      $(function(){
        alert("判定注释  "+isFormElement($("body")[0].firstChild))
        alert("判定form  "+isFormElement($("form")[0]));
        alert("判定div  "+isFormElement($("div")[0]));
        alert("判定select  "+isFormElement($("select")[0]));
        alert("判定label  "+isFormElement($("label")[0]));
        alert("判定button  "+isFormElement($("button")[0]));
        alert("判定input  "+isFormElement($("input")[0]));
        alert("判定fieldset  "+isFormElement($("fieldset")[0]));
        alert("判定legend  "+isFormElement($("legend")[0]));
      });

</script>
    <title>isFormElement by 司徒正美</title>
  </head>
  <body>

</fieldset>

</form>
  </body>
</html>