了凡和纤风
了凡和纤风

表单脚本

本章主要介绍：表单、文本框验证与交互、使用其他表单控制。这一章会继续沿用上一章 封装的 EventUtil 对象(具体参考前面的事件)

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面

一、表单的基础知识

JavaScript中，表单对应的是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement。HTMLFormElement 有自己下列独有的属性和方法

  • acceptCharset：服务器能够处理的字符集：等价于HTML中的 accpet-charset 特性
  • action：接受请求的URL：等价于HTML中的 action 特性。
  • elements：表单中所有控件的集合（HTMLCollection）
  • enctype：请求的编码类型；等价于HTML 中的 enctype 特性
  • length：表单中控件的数量
  • method：要发送的HTTP请求类型，通常是“get” 或 “post”；等价于 HTML 的method特性。
  • name：表单的名称；等价于HTML 的name 特性
  • reset()：将所有表单域重置为默认值
  • submit()：提交表单
  • target：用于发送请求和接受响应的窗口名称；等价于 HTML 的target 特性。

取得

元素 引用的方式有好几种：最常见的方式是 使用 getElementById() 方法找到它

var form = document.getElementById('myForm')

其次，通过document.forms 获取页面中所有的表单，再通过 索引 或 name值 来访问

var firstForm = document.forms[0] // 获取页面中的第一个表单
var myForm = document.forms['form2'] // 获取页面中 名称为 “form2” 的表单

在较早的浏览器或者那些支持向后兼容的浏览器中，也会把每个设置了 name 特性的 表单作为属性保存在 document 对象中。通过document.form2 可以访问到名为 "form2" 的表单。

1.1、提交表单

使用 或

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并决定是否允许提交表单。

var form = document.getElementById('myForm')
EventUtil.addHandler(form, 'submit', function(event){
  // 取得事件对象
  event = EventUtil.getEvent(event)

  // if () { 
  // 阻止默认事件
  EventUtil.preventDefault(event)
  // }
})

在JavaScript中，以编程方式调用 submit() 方法也可以提交表单。这种方式无需表单包含提交按钮。任何时候都可以正常提交表单。

var from = document.getElementById('myForm')

// 提交表单
form.submit()

调用 submit() 方法提交表单的形式，不会触发 submit事件，因此要记得在调用此方法之前先验证表单数据。

提交表单时可能出现的最大问题，就是重复提交表单。为此，可以在在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

1.2、重置表单

使用 type 特性值为 “reset”的 或

也可以使用 JavaScript 的方式 来重置表单

var form = document.getElementById('myForm')

// 重置表单
from.reset()

用户单击重置按钮重置表单时，会触发 reset 事件。我们可以在必要时取消重置操作

/* 阻止重置表单操作 */
var form = document.getElementById('myForn')

form.onreset = function(event) {
  event.preventDefault()
}

1.3、表单字段

每个表单都有一个 elements 属性，该属性是表单中所有表单元素(字段)的集合。可以按照位置和 name 特性来访问它们，

var form = document.getElementById('myForm')

// 取得表单中的第一个字段
var field1 = form.elements[0]

// 取得表单中name 为 textbox1的字段
var field2 = form.elements['textbox1']

// 取得表单中包含的字段的数量
var fieldCount = from.elements.length

如果使用 name 实现访问元素时，多个表单控件的 name 相同，就会返回一个 以改name 命名的 NodeList，然后可以通过 索引 访问这个集合中的元素
如下

 red
 cyan
 violet
1.3.1、共有的表单字段属性

除了

元素之外，所有的表单字段都拥有相同的一组属性。
表单字段共有的属性如下。

  • disabled：布尔值，表示当前字段是否被禁用
  • form：指向当前字段所属表单的指针；只读。
  • name：当前字段的名称
  • readOnly：布尔值，表示当前字段是否只读
  • tabIndex：表示当前字段的切换（tab）序号
  • type：当前字段的类型，入“checkbox“、”radio“，等等。
  • value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含文件在计算机中的路径

超级 form属性之外，可以通过 JavaScript 动态的修改其他属性的值。

var form = document.getElementById('myForm')
var field = form.elements[0]

// 修改 value 属性
field.value = "Another value"

// 检查 form 属性值
alert(field.form == form) // true

// 把焦点设置当前字段
field.focus()

// 禁用当前字段
field.disabled = true

// 修改 type 属性(不推荐，但对于  元素来说是可行的)
field.type = "checkbox"

避免多次提交，最常见的解决方案，就是在第一次单机后就禁用提交按钮。

//  避免多次提交表单
EventUtil.addHandler(form, 'submit', function(event) {
  event = EventUtil.getEvent(event)
  var target = EventUtil.getTarget(event)

  // 取得提交按钮
  var btn = target.elements['submit-btn']

  // 禁用它
  btn.disabled = true
})

注意不能通过 onclick 事件处理程序来实现这个功能，原因是不同浏览器之间存在”时差“：有点浏览器会在触发表单的 submit 事件之前触发 click 事件，意味着会在提交发生之间禁用按钮，结果永远都不会提交表单

除了

之外，所有表单字段都有 type 属性。对于 元素，这个值等于 HTML 特性 type 的值。对于其他元素，这个 type 属性的值如下表所列：

说明 HTML示例 type 属性的值
单选列表 "select-one"
多选列表 "select-multiple"
自定义按钮 "submit"
自定义非提交按钮 "button"
自定义重置按钮 "reset"
自定义提交按钮 "submit

和