Javascript知识整理——表单脚本

表单的基础知识

在Javascirpt中，表单元素<form>对应的是HTMLFormElement类型，继承了的是Element类型，有自己独有的属性和方法：

• acceptCharset:服务器能够处理的字符集
• action:接受请求的URL
• elements：表单中所有空间的集合
• enctype:请求的编码类型
• length:表单中控件的数量
• method:要发送的HTTP请求类型
• name:表单的名称
• reset():将所有表单域重置为默认值
• submit():提交表单
• target:用于发送请求和接收相应的窗口名称

取得<form>元素引用的方式
var firstForm = document.forms[0];
var myForm = document.forms["form2"];

---

提交表单

\<input type="submit" value="Submit Form">
\<button type="submit">Submit Form</button>
\<input type="image" src='graphic.gif'>

上面三种按钮只要存在在form表单中，那么在相应表单控件拥有焦点的情况下，按回车就可以提交表单（textarea例外），触发表单的submit事件，通常需要自定义submit事件，因此需要经常阻止表单提交来进行相应的检查。

var form = document.getElementById("myForm")
form.submit()

注意以上这种方式提交表单是，不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。

重置表单

\<input type="reset" value="reset Form">
\<button type="reset">reset Form</button>

表单字段

每个表单都有docuement属性，是表单中所有表单元素(字段)的集合，顺序与出现在标记中的顺序对应，可以按照位置和name特性来访问它们

var form = document.getElementById('form1')
var field1 = form.elements[0]
var field2 = form.elements['textbox1']
var fieldCount = form.elements.length

如果多个表单控件都在使用一个name，就会返回以该name命名的一个NodeList

• 共有的表单字段属性
  • disabled:布尔值，表示当前字段是否被禁用
  • form：指向当前字段所属表单的指针，只读
  • name:当前字段的名称
  • readOnly：表示当前字段是否只读
  • tabIndex：表示当前字段切换序号
  • type:当前字段的类型
  • value：当前字段将被提交给服务器的值
• 共有的表单字段方法
  • focus()
  • blur()
• 共有的表单字段事件
  • blur
  • chagne:对于Input和textarea元素，在它们失去焦点且value值改变时触发，对于<select>元素，在其选项发生改变时触发
  • focus

文本框脚本

• input元素的type特性设置为'text'，通过size特性，指定能够显示的字符数，通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数
• textarea可以使用rows和cols指定行和列的字符数。

---

选择文本

• select()方法
  在文本框获得焦点时选择其所有文本是非常常见的做法，因为不用一个个地删除文本。
• 选择(select)事件
  在选择了文本框中的文本时就会触发select事件。
• 取得选择的文本
  HTML5为文本框添加了两个属性selectionStart和selectionEnd，
  可以通过input.value.substring(input.selectionStart,input.selectionEnd)方法获得选择的文本
• 选择部分文本
  textbox.setSelectionRange(start,end)

过滤输入

• 屏蔽字符
  • 阻止keyPress默认事件即可屏蔽所有的输入字符
  • 监听keyPress事件然后根据对应的字符编码进行判断，再决定如何响应
• 操作剪贴板
  • beforeCopy
  • copy
  • beforecut
  • cut
  • berforepaste
  • paste

自动切换焦点

原理是判断事件对象的value.length和maxlength是否相等来进行焦点切换

HTML5约束验证API

• 必填字段required
• 其他输入类型
  • email
  • url
  • ...
• 数值范围
  • number
  • range
  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
    上面这些类型可以指定min属性和max属性还有step属性。对应的方法有stepUp(count)和stepDowm(count)
• 输入模式
  pattern属性

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

• 检测有效性
  • checkValidity()方法
    所有表单字段包括表单本身都支持checkValidity()方法，检测字段是否有效，字符的值是否有效的判断依据html5的那些约束，与pattern属性不匹配也是无效的
  • validity属性
    validity属性告诉你为什么字段有效或无效，包含一系列属性，每个属性会返回一个布尔值（不作列举）
• 禁用验证
  设置novalidate属性(也是特性)可以告诉表单不进行验证

选择框脚本

选择框是通过select和option元素床架你的，为了与这个控件交互，除了所有表单共有的属性和方法外，还提供如下特殊的属性和方法：

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

选择该项

var selectedOpotion = selectbox.options[selctebox.selectedIndex]

添加选项

• Js操作DOM的方法
• var newOption = new Option('Option text','Option value')
• 使用选择框的add()方法，若需要添加到末尾，则置第二参数为null

移除选项

• DOM的removeChild()方法
• 选择框的remove()方法，传入要移除选项的索引
• 将相应项设置为null ， selectbox.options[0] = null

表单序列化

随着Ajax的出现，表单序列化已经是很常见的一种需求
浏览器将数据发送给服务器的过程：

• 对表单字段的名称和值进行URL编码，使用和号（&）分隔
• 不发送禁用的表单字段
• 只发送勾选的复选框和单选按钮
• 不发送type为'reset'和'button'的按钮
• 多项选择框的每个选中的值单独一个条目
• 单击提交按钮提交表单也会发送提交按钮
• select元素的值，就是选中的option元素的value特性的值

serialize的源码参考高程三一书p436页

以上参考红宝书《高程三》