Ruby's Louvre

每天学习一点点算法

导航

判定是否为表单元素

发现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>

posted on 2010-02-07 16:42  司徒正美  阅读(1912)  评论(1)  编辑  收藏  举报