javascript:表单脚本

一：表单的基础知识

• 　　在javascript中表单对应的HTMLFormElement类型，该类型有如下属性和方法：

　　1）acceptCharset -- 服务器可接受的字符集

　　2）action -- 接受请求的URL

　　3）elements -- 表单内部所有元素的集合

　　4）enctype -- 请求的编码类型

　　5）length -- 表单中控件的数量

　　6）method--HTTP请求的类型

　　7）name -- 表单的名称

　　8）target -- 用于发送请求和接受响应的窗口名称

　　9）reset() -- 重置表单

　　10）submit() -- 提交表单

• 取得form元素引用的方法：

　　　　1）getElementById方法

　　　　2）document.forms[name], 取得页面中所有的表单，表单中有name特性

• 提交表单

　　 　1）点击提交按钮或图像按钮，提交表单, 触发submit事件

　　　　input 和 button 的type特性为submit ,  input 的type特性为image

　　　2）表单调用方法submit()，不会触发submit事件

　　　提交表单可能出现的最大问题是重复提交，解决方法是一：第一次提交后禁用提交按钮，二：在onsubmit事件处理程序中取消后续的表单提交操作。

• 重置表单

　　　　1）重置按钮，type值为reset

　　　　2) 调用表单的reset()方法

• 表单字段（input button textarea fieldset）

　　访问表单字段的方法：form的elements属性，返回一个列表，出现的顺序与字段在表单出现的先后顺序保持一致，通过位置或者字段的name特性访问。

　　　　1）共有的表单字段属性(除fieldset)

　　　　　　disabled -- 布尔值，禁用表单字段　

　　　　　　form -- 拥有该字段的表单，不可修改，其他属性均可动态修改

　　　　　　name -- 字段的名称

　　　　　　value -- 字段要提交给服务器的值

　　　　　　type -- 字段类型

　　　　　　readonly -- 布尔值，字段是否只读　

　　　　2）共有的表单字段方法

　　　　　　focus() 方法---拥有焦点

　　　　　　blur()方法 -- 失去焦点

　　　　3）　共有的表单字段事件

　　　　　　有鼠标、键盘、更改和HTML事件之外，还有以下三个事件：

　　　　　　blur -- 失去焦点时触发

　　　　　　change -- 对于input 和textarea 失去焦点且value值被改变时触发，select元素选项被改变时触发

　　　　　　focus -- 获得焦点时触发

• 　文本框脚本

　　　　一： 有两种方式表示文本框：一，input元素，type为text    二，textarea多行文本

　　　　1）input单行文本

　　　　　　属性有：size---可显示的字符数      value--可设置默认初始值

　　　　　　　　　　maxlength -- 最多输入的字符数

　　　　2）textarea多行文本

　　　　　　属性有：rows    cols

　　　　文本框输入的饿值都被保存在value 属性中。　　

　　二：选择文本

　　　　  1）select()方法，没有参数，选择文本框中所有的文本

　　　　　2）选择select事件，当选择文本框中的文本时会触发选择事件

　　　　3）取得选择的文本

　　　　　　方法一：HTML5中为文本框添加了两个属性selectionStart 和 selectionEnd,这两个属性均为数值，表示开始选择的字符位置和结束选择的字符位置

　　　　　　例如：textbox为文本框，textbox.value.substring(selectionStart,selectionEnd)　

　　　　　　方法二：HTML5中的方法setSelectionRange()

　　　　　　textbox.setSelectionRange(开始位置，结束位置)

　　　　IE8之前的选择文本方法，与上面讲到的不同。

三：过滤输入

　　1）屏蔽输入

　　　　有些文本框要求输入一定格式的字符，如要求输入非数值字符。在keypress事件中通过正则表达式判断用户的输入的字符，event对象的preventDefault取消事件的默认行为

• 选择框脚本

　　选择框是通过select - option元素创建的，javascript中选择框是属于HTMLSelectElement类型，该类型提供的属性和方法：

　　　　1） add(newoption,reloption) -- 添加新的选项，在相关选项reloption之前

　　　　2）multiple -- 布尔值，是否是多项选择

　　　　3）options -- 所有<option>元素的集合

　　　　4）remove(index) --移除index位置的选项

　　　　5）selectedIndex -- 选中项中第一项的索引，多项选择只保存第一个选择项的位置

　　　　6）size -- 选择框可见的行数

　　　　7）type -- 两个值：select-one   或 select-multiple

　　html中的option元素，在javascript中是用HTMLOptionElement对象表示。该对象提供的属性有：

　　　　 1）index -- 当前选项在options集合中的位置

　　　　2）label -- 当前选项的标签，等同于html中的label特性

　　　　3）selected -- 当前选项是否被选中

　　　　4）text -- 选项的文本

　　　　5）value -- 选项的值，等同于html的value特性　　

　　二：选择选项

　　　　 1） 单选选择框时，通过selectedIndex得到选择项，再通过option的text,value等属性获得更多地信息

　　　　2) 多项选择时，可以通过option的selected 判断选项是否被选中

　　三：添加选项

　　　　三种方法：1）createElement方法  2） Option构造函数，该构造函数返回的是option元素，使用appendChild  3）使用选择框的add方法

　　四：移除选项

　　　　三种方法：1）removeChild方法  2）选择框的remove方法  3）将要移除的选项设置为null

　　五：移除和重排选择

　　　　appendchild方法  和  insertBefore方法

• 表单序列化

　　在javascript中使用表单的type属性，name属性和value属性实现表单的序列化。

　　

funciton serialize(form){
var parts = [],
field = null,
i,
len,
j,
optLen,
option,optionValue;

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 = (optino.hasArrtibute('value')?option.value:option.text);
}
else{optValue = (option.attributes['value'].specified?option.value:option.text)}
parts.push(encodeURLComponent(field.name) + "=" + encodeURLComponent(optValue))

case "undefined"://fiedlset元素，没有type特性，未定义
case "file":
case "reset":
case "button":
break;
case "radio":
case "check":
if (!field.checked){break;}
default:
if(field.name.length){
parts.push(encodeURLComponent(field.name) + "=" + encodeURLComponent(optValue))
}   
}
}
}
}
}
return parts.join("&")
}