Javascript知识整理——表单脚本

表单的基础知识

在Javascirpt中，表单元素

对应的是HTMLFormElement类型，继承了的是Element类型，有自己独有的属性和方法：

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

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

---

提交表单

\
\Submit Form
\

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

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

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

重置表单

\
\reset Form

表单字段

每个表单都有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值改变时触发，对于元素，在其选项发生改变时触发
    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属性
    • 检测有效性
      • checkValidity()方法
        所有表单字段包括表单本身都支持checkValidity()方法，检测字段是否有效，字符的值是否有效的判断依据html5的那些约束，与pattern属性不匹配也是无效的
      • validity属性
        validity属性告诉你为什么字段有效或无效，包含一系列属性，每个属性会返回一个布尔值（不作列举）
    • 禁用验证
      设置novalidate属性(也是特性)可以告诉表单不进行验证

    选择框脚本

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

    • add(newOption,relOption)：向控件中插入新的元素，其位置在相关项（relOption）之前
    • multiple：布尔值，表示是否允许多项选择
    • options：控件中所有元素的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页

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