第十四章 表单脚本
2015-08-13 00:33:28 14 举报AI智能生成
第十四章主要介绍了表单脚本的编写和使用。表单脚本是一种用于处理用户在网页表单中输入的数据的脚本语言。它可以帮助开发者验证用户输入的数据，确保数据的完整性和准确性。此外，表单脚本还可以用于处理用户的提交操作，例如将用户输入的数据发送到服务器，或者在用户提交表单后显示一个感谢页面。本章详细介绍了如何使用JavaScript编写表单脚本，包括如何获取和设置表单元素的属性，如何处理用户的操作事件，以及如何使用AJAX技术异步提交表单数据。通过学习本章，读者可以掌握表单脚本的基本知识和技能，提高网页开发的效率和质量。
作者其他创作
大纲/内容
表单的基础知识
JS中，表单对应的是HTMLFormElement类型
HTMLFormElement的属性/方法
acceptCharset
服务器能够处理的字符集
action
接受请求的URL
elements
表单中所有控件的集合
enctype
请求的编码类型
length
表单中控件的数量
method
要发送的HTTP类型，常用get/post
name
表单的名称
reset()
将所有表单重置为默认值
submit()
提交表单
target
用于发送请求和接收响应的窗口名称
获取form的方式
为其添加id，通过getElementById()获取
通过document.forms可获取页面中所有表单,通过索引或name取得特定表单
提交表单
页面中button/input设置属性：type="submit"
js中设置：form.submit()
解决重复提交表单的方法
在第一次提交表单后就禁用提交表单
利用onsubmit事件处理程序取消后续的表单提交操作
重置表单
页面中button/input设置属性：type="reset"
js中设置：form.reset()
表单字段
elements属性
是表单中所有表单元素的集合，可按照位置和name访问表单中的字段
共有的表单字段属性
disabled
表示当前字段是否被禁用，布尔值
form
指向当前字段所属表单的指针，只读
name
当前字段的名称
readOnly
表示当前字段是否只读，布尔值
tabIndex
表示当前字段的切换序号
type
当前字段类型
value
当前字段将被提交给服务器的值
共有的表单字段方法
focus()
获取焦点
blur()
失去焦点
HTML5新增autofocus属性，可自动获取焦点
共有的表单字段事件
blur
当前字段失去焦点时触发
change
在input、textarea元素失去焦点且value值改变时触发
在select元素的选项改变时触发
focus
当前字段获取焦点时触发
文本框脚本
表示文本框的方式
元素的单行文本框
中间，且不能指定最大字符数
选择文本
select()方法
可在文本框获取焦点时，选择文本框中的所有文本
获取选择的文本
HTML5的selectionStart和selectEnd属性，表示选取文本的范围
IE8及之前版本：document.selection对象，可保存在整个文档范围内选择的文本
选择部分文本
HTML5的setSelectionRange(n,m)：从索引n开始，截取到索引m处，但不包含m
IE8及之前版本：createTextRange()
过滤输入
屏蔽字符/按键
操作剪贴板
自动切换焦点到下一个字段
HTML约束验证API
required
必填字段
email
输入文本需符合电子邮件格式
url
输入文本需符合URL的模式
tel
输入文本必须是数字
number/range/datetime/datetime-local/date/month/week/time
都是基于数字的值，浏览器支持不好
都有min,max,step(步长)属性
pattern
属性值是一个正则表达式，用于匹配文本框中的值
注：模式的开头和结尾不用加^和$符合
checkValidity()
用于检测表单中的方法是否有效，返回true或false
validity
通过该对象的属性可以告诉开发人员字段为什么有效或无效
禁用验证
novalidate：可告诉表单不进行验证
formnovalidate：可指定点击某个提交按钮不进行表单验证
