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

特性：
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特性确定</p><p><label/> 元素 将标签绑定到特定的表单字段<br />for 属性 指定绑定的表单id<br />当鼠标点击label<a href="https://www.lsjlt.com/tag/容器/" target="_blank"><strong class="keylink">容器</strong></a>，焦点将移到指定表单上<br />例如：<br /><input type="radio" name="r1" id="r1"/><label for="r1">已绑定</label><br/><br /><input type="radio" name="r2" id="r2"/>无绑定</p><p>建议在每个表单字段都设置id和name属性，且值相等。（name用于数据提交，id用户客户端确定元素）</p><p> </p><p>对<form/>元素进行脚本编写</p><p><br />获取表单引用<br />1 用getElementById()<br />例如：var oForm = document.getElementById("form1");</p><p>2 用document的form<a href="https://www.lsjlt.com/tag/集合/" target="_blank"><strong class="keylink">集合</strong></a>，并通过位置或name属性引用<br />例如：var oForm = document.forms[0];<br />或者：var oForm = document.forms["form1"];</p><p><br />访问表单字段<br />1 通过表单的elements集合，并通过位置或name属性引用<br />例如：var oElm = oForm.elements[0];<br />或者：var oElm = oForm.elements["elm"];</p><p>2 直接通过name属性访问<br />例如：var oElm = oForm.elm;<br />如果名字中有空格可以用方括号：<br />var oElm = oForm["elm 1"];</p><p>3 用getElementById()<br />例如：var oElm = document.getElementById("elm1");</p><p><br />表单字段共性<br />所有表单字段（除隐藏字段）：<br />disabled 属性 设置或获取控件是否被禁用<br />form 属性 获取对象所在表单的引用<br />blur() 方法 使元素失去焦点并触发onblur事件<br />focus() 方法 使元素得到焦点并触发onfocus事件<br />onblur 事件 元素失去焦点时触发<br />onfocus 事件 元素得到焦点时触发</p><p>注意：隐藏字段（hidden）只有form属性</p><p><br />提交表单<br />1 使用提交按钮或提交图象提交表单<br />例如：<br /><input value="submit" type="submit" /><br /><input src="submit.gif" type="image" /><br />当客户点击以上按钮将提交表单，如果按回车，并存在这些按钮，浏览器会认为点击了按钮</p><p>2 获取表单引用，再使用submit()方法<br />例如：<br />document.getElementById("form1").submit();<br />用button模拟submit：<br /><input value="submit" type="button" onclick="this.form.submit();" /></p><p>onsubmit 事件 表单提交时触发<br />例如；<br /><form onsubmit="alert('提交');"></p><p>注意：如果是使用submit()方法提交，将不会触发submit事件</p><p><br />仅提交一次<br />方法：用户点击提交按钮后，将其禁用<br />例如：<br /><input value="submit" type="button" onclick="this.disabled=true;this.form.submit();" /><br />注意：如果用submit类型按钮，由于在表单提交前就已被禁用，将导致提交失败</p><p><br />重置表单<br />1 使用Reset按钮<br />例如：<br /><input value="reset" type="reset" /></p><p>2 获取表单引用，再使用reset()方法<br />例如：<br />document.getElementById("form1").reset();<br />用button模拟submit：<br /><input value="reset" type="button" onclick="this.form.reset();" /></p><p>onreset 事件 表单重置时触发<br /><form onreset="alert('重置');"></p><p>不同于submit()方法，使用reset()方法也会触发reset事件</p><p>注意：对于表单的默认信息，重置后还是会保留的，对于没有默认信息的表单应尽量避免使用</p><p> </p><p>文本框</p><p>有两种文本框：<br />单行文本框 <input type="text"/><br />size 属性 文本框宽度<br />value 属性 文本框初始内容<br />maxlength 属性 文本框允许最大字符数<br />例如：<br /><input type="text" size="10" maxlength="20" value="请输入内容"/></p><p>多行文本框 <textarea/><br />rows 属性 以字符为单位文本框的高度<br />cols 属性 以字符为单位文本框的宽度<br /><textarea/>的初始值包含在标签之间<br />例如：<br /><textarea rows="9" cols="5">请输入内容
而且不能指定允许最大字符数</p><p><br />获取/更改文本框的值<br />value 属性 获取或设置文本框文本<br />value.length 属性 获取文本框中文本长度</p><p><br />选择文本<br />select() 方法 选中文本框中所有文本（必须已经获得焦点）<br />为确保文本框获得焦点，最好在调用select()前调用focus()<br />例如：<br /><input type="text" id="txt"/><br /><input value="选择" type="button" onclick="txt.focus();txt.select();" /></p><p><br />文本框事件<br />除了blur和focus事件，还支持change和select事件<br />change 事件 用户更改内容并失去焦点时触发<br />注意：通过value属性更改内容将不会触发，而且触发时先触发change事件，再触发blur事件<br />select 事件 当一个或多个字符被选中时触发<br />无论手工还是select()方法，与焦点无关</p><p><br />自动选择文本<br />例如：<br /><input type="text" onfocus="this.select()"/><br /><textarea onfocus="this.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事件，将文本框内容设置为当前选中的选项
注意：由于匹配过程是区分大小写的，建议先将字符串转为小写或大写