表单基础知识

在HTML中，表单是使用form元素来表示的，JS中对应的是HTMLFormElement类型。它同样继承自HTMLElement，还有一些自己的方法：
1.acceptCharset：服务器能处理的字符集
2.action：接受请求的URL
3.elements：表单中所有控件的集合（HTMLCollection）
4.enctype：请求的编码类型
5.length：表单中所有控件的数量
6.method：要发送的HTTP请求类型，通常是get或post
7.name：表单的名称
8.reset()：将所有表单域重置为默认值
9.submit()：提交表单
10.target：用于发送请求和接收响应的窗口名称
通过document.forms可以取得页面中所有的表单。在这个集合里，可以通过数值索引或 name 值来取得特定的表单。

var firstForm = document.forms[0];
var myForm = document.forms["form2"];

• 提交表单

用户单击提交按钮或图像按钮时就回提交表单。

//html
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
<input type="image" src="graphic.gif">

表单中存在上述任何一种按钮时，在表单中元素具有焦点的情况下，按回车就可以提交该表单。
submit同样是一种事件类型，通过设置事件处理函数可以改变其行为，比如取消掉。

//js
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event) {
  //取得事件对象
  event = EventUtil.getEvent(event);
  //阻止默认事件
  EventUtil.preventDefault(event);
});

可以通过代码来触发submit操作，但是不会触发submit事件。

firstForm.submit();

• 重置表单

就是清空所有表单数据

<input type="reset" value="Reset Form">
<button type="reset">Reset Form</button>

这同样会触发一个reset事件

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event) {
  //取得事件对象
  event = EventUtil.getEvent(event);
  //阻止表单重置
  EventUtil.preventDefault(event);
});

使用form.reset()方法重置表单时还是会触发reset事件的。

• 表单字段

每个表单都有elements属性，该属性时表单中所有表单元素的集合，是有序的。通过位置和name都可以访问。

alert(firstForm.elements[0].name);
alert(firstForm.elements["password"].name);
alert(firstForm.elements.length);

如果有相同name的元素，那么就回返回一个NodeList
共有的表单字段属性:
1.disabled
2.form：指向当前字段所属的表单的的指针，只读
3.name：当前字段的名称
4.readOnly：当前字段是否只读
5.tabIndex：当前字段的切换序号
6.type：“checkbox”、“radio”
7.value：当前字段将被提交给服务器的值，对于文件字段来说这个属性是只读的，包含文件在计算机中的路径
JS可以动态修改他们。

var field = firstForm.elements[0];
field.value = "Another value";
alert(field.form === firstForm);
field.focus();
field.disabled = true;
field.type = "checkbox";

避免多次提交表单就可以在submit事件中禁用提交按钮。
共有的表单字段方法:
1.focus()
2.blur()
注：focus不能聚焦到没有被显示出来的属性。HTML5有autofocus属性。
共有的表单字段事件
1.blur
2.change
3.focus

文本框脚本

文本框有两种input和textarea

<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>

在JS中可以使用value属性来获取他们的内容。
特别提醒，处理文本框的值的时候不要使用标准DOM修改特性或文本子节点的方法，使用value属性，这样才能保证value属性的值（最终被提交到服务器的）和显示的值是一致的。

• 选择文本

上述两种文本框都支持select方法，这个方法用于选择文本框中所有文本。
这个在焦点移到输入框时自动选择其中的文本。

var field = firstForm.elements[1];
EventUtil.addHandler(field, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
});
//选择事件
//选择文本框内的文本或使用select()时会触发select事件。

取得选择的文本
HTML5中使用这两个属性selectionStart、selectionEnd取得选择的文本,这两个表示所选择文本的范围（即是文本的开头和结尾的偏移量）
IE8及以下不支持，使用替代方案，不管用户在页面上选择了什么都会创建一个document.selection对象
兼容代码如下：

EventUtil.addHandler(field, "select", function(event){
    console.log(getSelectedText(field));
});
function getSelectedText(textbox) {
    if (typeof textbox.selectionStart == "number") {
        return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
}

选择部分文本
刚才的select方法只能选择全部文本，setSelectionRange()方法接收两个参数要选择的第一个字符的索引和最后一个字符的索引。然后把焦点移过来才能看到

//选择前三个字符
textbox.setSelectionRange(0, 3);
text.focus();

IE8不支持，又得用范围那一套。

function selectText(textbox, startIndex, stopIndex){
    if (textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}
selectText(text,0,3);

• 过滤输入

屏蔽字符
通过阻止keypress的默认事件来阻止用户输入。
像这样就所有的字符都输入不了啦，不过粘贴，用输入法之类的输入并不通过keypress的就阻止不了了呦~，改成keydown事件用ctrl的粘贴也会被阻止：

EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

针对特定的字符可以做特定的操作，比如只屏蔽数字键：

EventUtil.addHandler(text, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
        EventUtil.preventDefault(event);
    }
});

操作剪贴板
有6个属于剪贴板的事件：

1.beforecopy
2.copy
3.beforecut
4.cut
5.beforepaste
6.paste
beforecopy、beforecut、beforepaste，在IE中一直会在真正的复制粘贴前被触发，其他浏览器中貌似不大好用。就用另外3个就足够啦。
在这个事件中clipboardData使用来访问剪贴板中的数据，IE中是window.clipboardData，其他是event.clipboardData需要做下兼容。它有3个方法：getData()、setData()、clearData()，他们接收的参数是数据类型，浏览器之间也有差异需要兼容~：

getClipboardText: function(event){         
    var clipboardData = (event.clipboardData || window.clipboardData);         
    return clipboardData.getData("text");     
},
setClipboardText: function(event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){             
        return window.clipboardData.setData("text", value);         
    }     
}

剪贴板事件时调用一下，就可以控制复制粘贴的内容啦，知乎就是这么干的。

EventUtil.addHandler(text, "paste", function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
});

• 自动切换焦点

自动切换焦点小功能

(function(){
    function tabForward(event){         
        event = EventUtil.getEvent(event);         
        var target = EventUtil.getTarget(event);
        if (target.value.length == target.maxLength){             
            var form = target.form;
            for (var i=0, len=form.elements.length; i < len; i++) {                 
                if (form.elements[i] == target) {                     
                    if (form.elements[i+1]){                         
                        form.elements[i+1].focus();                     
                    }                     
                    return;                 
                }             
            }         
        }     
    }
    var textbox1 = document.getElementById("txtTel1");     
    var textbox2 = document.getElementById("txtTel2");     
    var textbox3 = document.getElementById("txtTel3");
    EventUtil.addHandler(textbox1, "keyup", tabForward);     
    EventUtil.addHandler(textbox2, "keyup", tabForward);     
    EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

• HTML5约束验证API

脱离JS即便JS不能加载，用HTML5的特性也能完成部分验证。
必填字段

<input type="text" name="username" required>

其他输入类型
有的输入字段自带验证：

<input type="email" name ="email"> 
<input type="url" name="homepage">

除了email，url还有"number"，"range"，"datetime"，"datetime-local"，"date"，"month"，"week"，"time"不过支持并不好。
数值范围

<input type="number" min="0" max="100" step="5" name="count"> 
//想用户输入0到100的值，而且必须是5的倍数
input.stepUp();     //加 1 
input.stepUp(5);    //加 5 
input.stepDown();   
input.stepDown(10);//减10

输入模式
这个属性是一个正则表达式

<input type="text" pattern="\d+" name="count"> 
var pattern = document.forms[0].elements["count"].pattern;

• 检测有效性

checkValidity()，这个方法可以用在整个表单，也可以用在某个字段。有效返回true。

if(document.forms[0].checkValidity()){
  //表单有效
} else{
  //表单无效
}

validity，这个属性是个对象，会更加详细的告诉你为什么字段有效或无效。这个对象中包含一系列属性，都是布尔值：
1.customError：如果设置了setCustomValidity()则为true，否则为false
2.patternMismatch：如果设置了和指定的pattern不匹配，返回true
3.rangeOverflow：如果值比max大，返回true
4.rangeUnderflow：如果值比min小，返回true
5.stepMisMatch：如果min和max之间的步长值不符合step，返回true
6.tooLong：如果值的长度超过了maxlength属性指定的长度，放回true。有的浏览器（如Firefox4），会自动约束字符数量。
7.typeMismatch：如果值不是“url”或者“mail”要求的格式，返回true
8.valid：如果这里的其他属性都是false，返回true。checkValidity()也要求有相同的值
9.valueMissing：如同标注为required的字段没有值，返回true。

if (input.validity && !input.validity.valid){     
    if (input.validity.valueMissing){
        alert("Please specify a value.")
    } else if (input.validity.typeMismatch){
        alert("Please enter an email address.");
    } else {
        alert("Value is invalid.");
    }
}

• 禁用验证

<form method="post" action="signup.php" novalidate>     
    <!--表-->  
</form> 
document.forms[0].noValidate = true; //

<input type="submit" formnovalidate name="btnNoValidate"         value="Non-validating Submit"> 
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

选择框脚本

选择框通过select和option元素创建。select在JS中为HTMLSelectElement。有下列属性和方法：

选择框是通过<select>和<option>元素创建的。为了方便与这个控件交互，除了所有表单字段公有的属性和方法外，HTMLSelectElement类型还提供了下列属性和方法。
1.add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项之前。
2.multiple：布尔值，表示是否允许多项选择，等价于 HTML 中的multiple特性。
3.options：控件中所有<option>元素的HTMLCollection。
4.remove(index): 移除给定位置的选项。
5.selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为 -1。对于支持多选的控件，只保存选中项中第一项的索引。
6.size：选择框中可见的行数；等价于 HTML 的size特性。

选择框的type属性不是"select-one"，就是"select-multiple"，这取决于 HTML 代码中有没有multiple特性。选择框的value属性由当前选中项决定。
在 DOM 中，每个<option>元素都有一个HTMLOptionElement对象表示。为便于访问数据，HTMLOptionElement对象添加了下列属性：
1.index：当前选项在options集合中的索引。
2.label：当前选项的标签；等价于 HTML 中的label特性。
3.selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
4.text：选项的文本。
5.value：选项的值（等价于 HTML 中的value特性）。

• 选择选项

1.对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的selectedIndex属性。

2.多选选择框，设置selectedIndex属性会导致取消以前的所有选项并选择指定的那一项，而读取selectedIndex则会返回选中项中第一项的索引值。
另一种选择选项的方式，就是取得对某一项的引用，然后将其selected属性设置为true。

3.要取得所有选中的项，可以循环遍历选项集合，然后测试每个选项的selected属性。

注：多选框可以通过设置selected属性选中任意多个项。在单选框中，修改某个选项的selected属性则会取消对其他选项的选择。需要注意的是，将selected属性设置为false对单选框没有影响。

//只允许选择一项
var selectedOption = selectbox.options[selectbox.selectedIndex]; 

//多选择框的时候使用selected属性
selectbox.options[0].selected = true; 

//取得所有选中的项
function getSelectedOption(selectbox) {
  var result = new Array();
  var option = null;
  for (var i=0,len=selectbox.options.length; i < len; i++) {
    option = selectbox.options[i];
    if (option.selected) {
      result.push(option);
    }
  }
  return result;
}

• 添加选项

1.使用 DOM 方法。（最佳方案）

2.使用Option构造函数。

3.使用选择框的add()方法。兼容 DOM 的浏览器要求必须指定第二个参数。

//第一种方法
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);

//第二种方法
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);

//第三种方法
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);

如果你想将新选项添加到其他位置（不是最后一个），就应该使用标准的 DOM 技术和insertBefore()方法。

• 移除选项

1.首先，可以使用 DOM 的removeChild()方法，为其传入要移除的选项.

2.其次，可以使用选择框的remove()方法。这个方法可以接受一个参数，即要移除选项的索引，

3.最后一种方式，就是将相应选项设置为null。这种方式也是 DOM 出现之前浏览器的遗留机制。

4.要清除选择框中所有的项，需要迭代所有选项并逐个移除它们。如下所示：

//第一种方法
selectbox.removeChild(selectbox.options[0]);

//第二种方法
selectbox.remove(0);

//第三种方法
selectbox.options[0] = null;

//清除所有的项
function clearSelectbox(selectbox) {
  for (var i=0, len=selectbox.options.length; i < len; i++) {
    selectbox.remove(i?0);
  }
}

• 移动和重排选项

1.移动使用 DOM 的appendChild()方法。

2.重排最合适的 DOM 的方法就是insertBefore()。

表单序列化

随着 Ajax 的出现，表单序列化已经成为一种常见需求。可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在编写代码之前，必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。

• 对表单字段的名称和值进行 URL 编码，使用和号（&）分隔。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选按钮。
• 不发送 type 为“reset”和“button”的按钮。
• 多选选择框中的每个选中的值单独一个条目。
• 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为“image”的<input>元素。
• <select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。
  以下就是实现表单序列化的代码。

function serialize(form) {
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue;
for (i=0, len=form.elements.length; i < len; i++) {
  field = form.elements[i];
  switch(field.type) {
    case "select-one":
    case "select-multiple":
    if (field.name.length) {
      for (j=0,optLen = field.options.length; j < optLen; j++) {
        option = field.options[j];
        if (option.selected) {
          optValue = "";
          if (option.hasAttribute) {
            optValue = option.hasAttribute("value") ? option.value : option.text;  
          } else {
            optValue = option.attributes("value").specified ? option.value : option.text;
          }
          parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
        }
      }
    }
    break;
    case undefined:  //字段集
    case "file":  //文件输入
    case "submit":  //提交按钮
    case "reset":  //重置按钮
    case "button":  //自定义按钮
      break;
    case "radio":  //单选按钮
    case "checkbox":  //复选框
      if(!field.checked) {
        break;
      }
      /* 执行默认操作 */
    default:  //不包含没有名字的表单字段
      if (field.name.length) {
        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
      }
  }
}
return parts.join("&");
}