表單腳本

表單基礎

基本屬性和方法

一、action
請求的url(默認值是當前url)
二、elments
表單字段的HTMLCollection
三、method
請求方式（默認值Get）
四、name
表單的名字,能夠經過document.forms[name]獲取form
五、reset
重置表單,會觸發form的reset事件。type爲rest的button、input也能夠實現rest功能，觸發reset事件
六、submit
手動提交表單，不會觸發submit事件
七、enctype
請求的context-type

提交表單

兩種方法提交表單
一、type爲submit的button、input,或者type爲image的input
二、調用form.submit方法

1. 表單會提交非disabled而且帶有name的非button表單字段的value值
2. 多選框和複選框會以同名key提交多個value

表單字段

form的elments包含對錶單中全部字段的引用，包括全部的input、textarea、button、select、fieldset元素

表單字段的公共屬性

disabled
布爾值，表示字段是否啓用
form
指針，指向對應的form，只讀
name
字段的名字
readOnly
只讀，只對input和textarea有效
tabIndex
數值，tab鍵切換的順序
type
表示字段類型，諸如radio,checkbox
value
字段的值

表單字段的公共方法

1. focus
2. blur

表單字段的公共事件

1. blur
2. change
3. focus

文本框編程（input,textarea）

input的基本屬性

一、size
指定文本框的寬度，這個寬度以字符數來計算
二、value
文本框的值
三、maxLength
文本框的最大字符數

textarea的基本屬性

一、rows
textarea的高度
二、cols
textarea的寬度
textarea不支持maxLength

選擇文本

文本框元素的select()會全選文本框中的文字

select事件

當文本框中出現文字選中操做時就會觸發select事件

取得選中的文本

文本框有兩個屬性selectionStart和selectionEnd表示選擇的起點和終點

部分選中文本

文本框提供了setSelectionRange方法選擇文字，提供兩個參數，選擇的起點和終點

HTML5約束驗證Api

必填字段

給表單字段添加required屬性，提交時必須確認有值

輸入類型

input的type支持url和email限制提交，它不會阻止用戶無效的輸入，只會不容許表單提交

數值範圍

對於number類型的input提供min,max,step限制數值範圍，
它不會阻止用戶無效的輸入，只會不容許表單提交

<input type="number" min="0" max="100" step="5">
//只容許輸入0到100中5的倍數

輸入模式

html5爲text的input提供了pattern屬性限制提交

<input type="text" pattern="\d+">
//只容許輸入數字

pattern默認都是有^和$的

檢測有效性

使用checkValidity()能夠檢測表單中任意給定字段是否有效，這個方法能夠在全部表單元素上使用

form.elements[0].checkValidity()//檢測字段是否有效
form.checkValidity()//檢測整個表單是否有效

表單字段的validity屬性也能夠檢測字段是否有效

禁用字段驗證

在form上添加noValidate屬性能夠禁用整個form的字段驗證
也能夠在提交按鈕上添加formnovalidate屬性，指定經過該按鈕的提交無需表單驗證

選擇框編程（select）

select的基本屬性和方法

一、add(newOption,relIndex)
在relIndex對應的relOption前添加newOption，relIndex是可選的，若是不傳則在最後添加
二、multiple
布爾值，表示是否支持多選
三、options
選擇框中的全部option元素的HTMLCollection
四、remove(index)
移除指定索引的option
五、selectedIndex
選中項的索引,多選時只返回第一個選中option的索引
六、size
選中框的可見行數
七、value
選中option的value,若是沒有指定value則是option的文本
多選時只返回第一個選中的option的值

option的基本屬性

一、index
選項在options集合中的索引
二、selected
選項是否選中
三、text
選項的文本
四、value
選項的值

選項處理

下面三種方法均可以修改select的value

1. 修改select的selectedIndex
2. 修改option的selected
3. 直接修改select的value

添加選項

var option = new Option("label","value")
select.add(option,undefined)//在最後面添加option