第十四章 表单脚本
2015-08-16 01:44:33 10 举报AI智能生成
第十四章主要介绍了表单脚本的编写和应用。表单脚本是用于处理用户在网页表单中输入的数据，并执行相应的操作的一种编程语言。通过编写表单脚本，可以实现对用户输入数据的验证、数据存储和提交等功能。本章首先介绍了表单脚本的基本语法和常用函数，包括获取用户输入的值、验证输入的格式和内容等。然后，通过实际案例演示了如何使用表单脚本实现用户注册、登录和信息修改等功能。最后，还介绍了一些常用的表单脚本技巧和注意事项，帮助读者更好地理解和应用表单脚本。通过学习本章，读者可以掌握表单脚本的基本知识和技能，并能够独立编写和调试表单脚本程序。
作者其他创作
大纲/内容
表单的基础知识
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：可指定点击某个提交按钮不进行表单验证
