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

表单和数据完整性

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

表单基础

HTML表单通过<form/>元素来定义

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

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

<label/> 元素 将标签绑定到特定的表单字段
for 属性 指定绑定的表单id
当鼠标点击label容器，焦点将移到指定表单上
例如：
<input type="radio" name="r1" id="r1"/><label for="r1">已绑定</label><br/>
<input type="radio" name="r2" id="r2"/>无绑定

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

对<form/>元素进行脚本编写

获取表单引用
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 使用提交按钮或提交图象提交表单
例如：
<input value="submit" type="submit" />
<input src="submit.gif" type="image" />
当客户点击以上按钮将提交表单，如果按回车，并存在这些按钮，浏览器会认为点击了按钮

2 获取表单引用，再使用submit()方法
例如：
document.getElementById("form1").submit();
用button模拟submit：
<input value="submit" type="button" onclick="this.form.submit();" />

onsubmit 事件 表单提交时触发
例如；
<form onsubmit="alert('提交');">

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

仅提交一次
方法：用户点击提交按钮后，将其禁用
例如：
<input value="submit" type="button" onclick="this.disabled=true;this.form.submit();" />
注意：如果用submit类型按钮，由于在表单提交前就已被禁用，将导致提交失败

重置表单
1 使用Reset按钮
例如：
<input value="reset" type="reset" />

2 获取表单引用，再使用reset()方法
例如：
document.getElementById("form1").reset();
用button模拟submit：
<input value="reset" type="button" onclick="this.form.reset();" />

onreset 事件 表单重置时触发
<form onreset="alert('重置');">

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

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

文本框

有两种文本框：
单行文本框 <input type="text"/>
size 属性 文本框宽度
value 属性 文本框初始内容
maxlength 属性 文本框允许最大字符数
例如：
<input type="text" size="10" maxlength="20" value="请输入内容"/>

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

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

选择文本
select() 方法 选中文本框中所有文本（必须已经获得焦点）
为确保文本框获得焦点，最好在调用select()前调用focus()
例如：
<input type="text" id="txt"/>
<input value="选择" type="button" onclick="txt.focus();txt.select();" />

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

自动选择文本
例如：
<input type="text" onfocus="this.select()"/>
<textarea onfocus="this.select()"></textarea>

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

限制textarea的字符数
例如：
<textarea onkeypress="return this.value.length < 10;"></textarea>

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

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

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

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

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

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

列表框和组合框

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

访问选项
HTML DOM为每个<select/>元素定义了 options 集合
获取<option/>显示文本和值：
一般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方法创建<option/>元素
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事件，将文本框内容设置为当前选中的选项
注意：由于匹配过程是区分大小写的，建议先将字符串转为小写或大写