《JavaScript高级程序设计》学习笔记（表单和数据完整性）

表单和数据完整性

创建表单元素是为了满足用户向服务器发送数据的需求。

表单基础

HTML表单通过

元素来定义

特性：
method 属性 设置或获取如何将表单数据发送到服务器
action 属性 设置或获取表单内容要发送处理的 URL
enctype 属性 设置或获取表单发送的编码方式。默认是application/x-www-form-urlencoded，如果要上传文件要设成multipart/form-data。
accept 属性 上传文件时，列出服务器能正确处理的mime类型
acceptCharset 属性 设置或获取处理表单的服务器必须接受的字符编码

输入元素：
元素 主要的HTML输入元素
通过type属性确定控件：
text radio checkbox file password button submit reset hidden image
元素 组合框或下拉框，值由元素定义
元素 多行文本，尺寸由rows和cols特性确定

元素 将标签绑定到特定的表单字段
for 属性 指定绑定的表单id
当鼠标点击label容器，焦点将移到指定表单上
例如：
已绑定

无绑定

建议在每个表单字段都设置id和name属性，且值相等。（name用于数据提交，id用户客户端确定元素）

对

元素进行脚本编写

获取表单引用
1 用getElementById()
例如：var oForm = document.getElementById("form1");

2 用document的form集合，并通过位置或name属性引用
例如：var oForm = document.forms[0];
或者：var oForm = document.forms["form1"];

访问表单字段
1 通过表单的elements集合，并通过位置或name属性引用
例如：var oElm = oForm.elements[0];
或者：var oElm = oForm.elements["elm"];

2 直接通过name属性访问
例如：var oElm = oForm.elm;
如果名字中有空格可以用方括号：
var oElm = oForm["elm 1"];

3 用getElementById()
例如：var oElm = document.getElementById("elm1");

表单字段共性
所有表单字段（除隐藏字段）：
disabled 属性 设置或获取控件是否被禁用
form 属性 获取对象所在表单的引用
blur() 方法 使元素失去焦点并触发onblur事件
focus() 方法 使元素得到焦点并触发onfocus事件
onblur 事件 元素失去焦点时触发
onfocus 事件 元素得到焦点时触发

注意：隐藏字段（hidden）只有form属性

提交表单
1 使用提交按钮或提交图象提交表单
例如：


当客户点击以上按钮将提交表单，如果按回车，并存在这些按钮，浏览器会认为点击了按钮

2 获取表单引用，再使用submit()方法
例如：
document.getElementById("form1").submit();
用button模拟submit：

onsubmit 事件 表单提交时触发
例如；

注意：如果是使用submit()方法提交，将不会触发submit事件

仅提交一次
方法：用户点击提交按钮后，将其禁用
例如：

注意：如果用submit类型按钮，由于在表单提交前就已被禁用，将导致提交失败

重置表单
1 使用Reset按钮
例如：

2 获取表单引用，再使用reset()方法
例如：
document.getElementById("form1").reset();
用button模拟submit：

onreset 事件 表单重置时触发

不同于submit()方法，使用reset()方法也会触发reset事件

注意：对于表单的默认信息，重置后还是会保留的，对于没有默认信息的表单应尽量避免使用

文本框

有两种文本框：
单行文本框
size 属性 文本框宽度
value 属性 文本框初始内容
maxlength 属性 文本框允许最大字符数
例如：

多行文本框
rows 属性 以字符为单位文本框的高度
cols 属性 以字符为单位文本框的宽度
的初始值包含在标签之间
例如：
请输入内容
而且不能指定允许最大字符数

获取/更改文本框的值
value 属性 获取或设置文本框文本
value.length 属性 获取文本框中文本长度

选择文本
select() 方法 选中文本框中所有文本（必须已经获得焦点）
为确保文本框获得焦点，最好在调用select()前调用focus()
例如：

文本框事件
除了blur和focus事件，还支持change和select事件
change 事件 用户更改内容并失去焦点时触发
注意：通过value属性更改内容将不会触发，而且触发时先触发change事件，再触发blur事件
select 事件 当一个或多个字符被选中时触发
无论手工还是select()方法，与焦点无关

自动选择文本
例如：

自动切换到下一个
通过表单的elements集合，获取下一个表单元素

限制textarea的字符数
例如：

允许/阻止文本框中的字符
用于验证用户数据，或阻止无效数据输入

阻止无效字符
设定要阻止的字符，再检测输入字符的charCode是否要阻止的字符

允许有效字符
设定允许的字符，再检测输入字符的charCode是否允许的字符

对于粘贴内容
1 禁止粘贴
ie中，用onpaste事件阻止粘贴行为，其他还需要用oncontextmenu事件
例如：
对于用Ctrl+V进行的粘贴，可根据charCode和ctrlKey判断按键是否Ctrl+V

2 失去焦点验证
在onblur事件中检测
注意：不能在onchange事件中检测，当第一次检测时能正常发现不正确内容，这时焦点回到原来文本框，但如果第二次并没有修改不正确的内容，所以没有触发onchange事件，即没有触发检测事件直接跳过了。

使用上下键操作数字文本
在onkeydowm事件中操作

列表框和组合框

列表框和组合框通过HTML的元素来创建。
size 属性 同时可见的条目个数

访问选项
HTML DOM为每个元素定义了 options 集合
获取显示文本和值：
一般DOM方法：
oListbox.option[1].firstchild.nodevalue;
oListbox.option[1].getAttribute("value");
HTML DOM方法：
oListbox.option[1].text;
oListbox.option[1].value;

index 属性 表示在options集合中的位置
例如：oListbox.option[1].index; //1

length 属性 表示选项数目
例如：oListbox.options.length;

获取/更改选中项
select：
selectedIndex 属性 选中的选项的索引（没有选中时为-1）
multiple 属性 设为"multiple"时可以在列表框中选择多个选项
如果选中多个选项，selectedIndex将包含第一个选项的索引

option：
selected 属性 表示选项是否被选中
通过对选项循环判断selected属性，获取所有选中选项的索引

添加选项
用javascript添加选项：
1 使用DOM方法创建元素
var oOption = document.createElement("option");
2 创建文本节点，并分配名称
oOption.appendChild(document.createTextNode(sName));
3 设置选项的值
oOption.setAttribute("value", sValue);
4 将选项添加到列表框中
oListbox.appendChild(oOption);

删除选项
用javascript删除选项：
1 将要删除的选项设置为null
oListbox.options[1] = null;
2 使用remove()方法，参数为要删除的选项的索引
oListbox.remove(0);
注意：如果用循环来删除多个选项，最好从最大的索引开始操作，因为删除后index索引会重置

移动选项
把选项从一个列表框移动到另一个列表框：
1 获取要移动的选项的引用
var oOption = oListboxFrom(iIndex);
2 在另一个列表框中使用appendChild()方法添加该选项，同时该选项会从当前列表框中删除
oListboxTo.appendChild(oOption);
注意：跟删除选项一样，如果要移动多个选项，最好从最大的索引开始操作

重新排序选项
将选项进行重新排序，包括向上和向下移动：
1 获取要移动的选项的引用
var oOption = oListbox(iIndex);
2 获取要移动的位置的选项
向上移动：var oPrevOption = oListbox.options[iIndex-1];
向下移动：var oNextOption = oListbox.options[iIndex+1];
3 使用insertBefore()方法重新设置位置
向上移动：oListbox.insertBefore(oOption, oPrevOption);
向下移动：oListbox.insertBefore(oNextOption, oOption);

创建自动提示的文本框

这种文本框会检查用户输入的头几个字符，然后给出帮助用户输入的列表

匹配
搜索字符串数组并返回以特定字符开头的所有值：
1 创建用于存储所有匹配的值的数组
var arrResule = new Array;
2 确保进行匹配的字符串非空，再循环找出匹配的每个值，并添加到数组中
if(arrValues[i].indexof(sText)==0) arrResult.push(arrResule[i]);
建议：在得到匹配数组后最好用sort方法排序，对于字符串可结合localeCompare方法

内部机制
使用keyup事件调用提示程序
1 清空列表框（参考删除选项）
2 把匹配数组的值插入到列表框（参考添加选项）
3 给列表框的选项添加onclick事件，将文本框内容设置为当前选中的选项
注意：由于匹配过程是区分大小写的，建议先将字符串转为小写或大写

[@more@]

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/7558084/viewspace-1003471/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/7558084/viewspace-1003471/