JavaScript(十三) - 旧游无处不堪寻

这一篇，我们说说表单。
JavaScript 最初的一个应用，就是分担服务器处理表单的责任。

表单的基础知识

在 HTML 中，表单是由 form 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。
独有的属性和方法包括:

acceptCharset: 服务器能够处理的字符集，等价于 HTML 中的 accept-charset 特性
action: 接受请求的 URL，等价于 HTML 中的 action 特性
elements: 表单中所有控件的集合。
enctype: 请求的编码类型，等价于 HTML 中的 enctype 特性
length: 表单中控件的数量
method: 要发送的 HTTP 请求类型，通常是 “get” 或 “post”，等价于 HTML 的 method 特性
submit(): 提交表单
reset(): 将所有表单域重置为默认值

提交表单

使用 input 或 button 都可以定义提交按钮，只要将其 type 特性的值设置为 “submit” 即可:

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">

<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>

只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。
提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个:

在第一次提交表单后就禁用提交按钮
利用 onsubmit 事件处理程序取消后续的表单提交操作。

重置表单

在用户单击重置按钮时，表单会被重置。使用 type 特性值为 “reset” 的 input 或 button 都可以创建重置按钮，如下:

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">

<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

这两个按钮都可以用来重置表单。在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空; 而带有默认值的字段，也会恢复为默认值。
用户单击重置按钮重置表单时，会触发 reset 事件，利用这个机会，我们可以在必要时取消重置操作。

表单字段

可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有 elements 属性，该属性是表单中所有元素的集合。这个 elements 集合是一个有序列表，其中包含着表单中的所有字段，每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。

共有的表单字段属性

表单字段共有的属性和方法如下:

disabled: 布尔值，表示当前字段是否被禁用
form: 指向当前字段所属表单的指针，只读
name: 当前字段的名称
readOnly: 布尔值，表示当前字段是否只读
type: 当前字段的类型，如 “checkbox”、”radio” 等等
value: 当前字段将被提交给服务器的值

共有的表单字段方法

每个表单字段都有两个方法:

focus()
blur()

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。

共有的表单字段事件

所有表单字段都支持下列 3 个事件:

blur: 当前字段失去焦点时触发
focus: 当前字段获得焦点时触发
change: 对于 input 和 textarea 元素，在它们失去焦点且 value 值改变时触发，对于 select 元素，在其选项改变时触发

文本框脚本

在 HTML中，有两种方式来表现文本框:

使用 input 元素的单行文本框
使用 textarea 元素的多行文本框

要表现文本框，必须将 input 元素的 type 特性设置为 “text”。而通过设置 size 特性，可以指定文本框中能够显示的字符数。通过 value 特性，可以设置文本框的初始值，而 maxlength 特性则用于指定文本框可以接受的最大字符数。

<input type="text" size="25" maxlength="50" value="initial value">

相对而言，textarea 元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows 和 cols 特性。其中，rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数。与 input 元素不同，textarea 的初始值必须要放在 textarea 开始和结束标签之间:

<textarea rows="25" cols="5">initial value</textarea>

另一个与 input 的区别在于，不能在 HTML 中给 textarea 指定最大字符数。

不要使用 setAttribute() 设置 input 元素的 value 特性，也不要去修改 textarea 元素的第一个子节点。

var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);

textbox.value = "Some new value";

HTML5 约束验证 API

为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。浏览器自己会根据标记中的规则执行验证，然后自己显示适当的错误消息(完全不用 JavaScript 插手)。
只有在某些情况下表单字段才能进行自动验证。具体来说，就是要在 HTML 标记中为特定的字段指定一些约束，然后浏览器才会自动执行表单验证。

必填字段

第一种情况是在表单字段中指定了 required 属性，如下面的例子所示:

<input type="text" name="username" required>

任何标注有 required 的字段，在提交表单时都不能空着。

其他输入类型

HTML5 为 input 元素的 type 属性又增加了几个值。这些新的类型不仅能反映数据类型的信息，而且还能提供一些默认的验证功能。例如:

<input type="email" name ="email">
<input type="url" name="homepage">

“email” 类型要求输入的文本必须符合电子邮件地址的模式，而 “url” 类型要求输入的文本必须符合 URL 的模式。

数值范围

HTML5 还定义了另外几个输入元素。这几个元素都要求填写某种基于数字的值: “number”、”range”、”datetime”、”datetime-local”、”date”、”month”、”week”，还有 “time”。
对所有这些数值类型的输入元素，可以指定 min 属性(最小的可能值)、max 属性(最大的可能值)和 step 属性(从 min 到 max 的两个刻度间的差值)。

<input type="number" min="0" max="100" step="5" name="count">

输入模式

HTML5 为文本字段新增了 pattern 属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。

<input type="text" pattern="\d+" name="count">

检测有效性

使用 checkValidity() 方法可以检测表单中的某个字段是否有效。所有表单字段都有个方法，如果字段的值有效，这个方法返回 true，否则返回 false。

if (document.forms[0].elements[0].checkValidity()) {
    //字段有效，继续 
} else {
    //字段无效
}

要检测整个表单是否有效，可以在表单自身调用 checkValidity() 方法。如果所有表单字段都有效，这个方法返回 true，即使有一个字段无效，这个方法也会返回 false。

if(document.forms[0].checkValidity()) {
    //表单有效，继续
} else {
    //表单无效
}

禁用验证

通过设置 novalidate 属性，可以告诉表单不进行验证。

<form method="post" action="signup.php" novalidate>
    <!--这里插入表单元素--> 
</form>

为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加 formnovalidate 属性:

<form method="post" action="foo.php">
  <!--这里插入表单元素--> 
  <input type="submit" value="Regular Submit">
  <input type="submit" formnovalidate name="btnNoValidate"
      value="Non-validating Submit">
</form>

选择框脚本

选择框是通过 select 元素和 option 元素创建的。
HTMLSelectElement 类型提供了下列属性和方法:

add(newOption, relOption): 向控件中插入新 option 元素，其位置在相关项(relOption)之前
multiple: 布尔值，表示是否允许多项选择，等价于 HTML 中的 multiple 特性
options: 控件中所有 option 元素的 HTMLCollection
remove(index): 移除给定位置的选项
selectedIndex: 基于 0 的选中项的索引，如果没有选中项，则值为 -1
size: 选择框中可见的行数，等价于 HTML 中的 size 特性

选择框的 value 属性由当前选中项决定，相应规则如下:

如果没有选中的项，则选择框的 value 属性保存空字符串
如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则
如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本
如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值