JSform表单操作大全
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JSform表单操作⼤全
表单是⼀个⽹站的重要组成内容，是动态⽹页的⼀种主要的表现形式，它主要⽤于实现收集浏览者的信息或实现搜索等功能。
JavaScript 对表单的处理是作为⼀个对象来处理的。
在 JavaScript 中，根据其作⽤，对象主要分为 JavaScript 内置对象、DOM 对象和 BOM（浏览器）对象。
表单属于 DOM 对象，所以对表单对象的处理可以使⽤DOM。
1. 表单对象
⼀个 form 对象代表⼀个 HTML 表单，在 HTML 页⾯中由 <form> 标签对构成。
JavaScript 运⾏引擎会⾃动为每⼀个表单标签建⽴⼀个表单对象。
对 form 对象的操作需要使⽤它的属性或⽅法。
form 对象的常⽤属性和⽅法分别见表 1 和表 2。
表 1：form 对象常⽤属性
属性描述
action设置或返回表单的 action 属性
elements表⽰包含表单中所有表单元素的数组，使⽤索引引⽤其中的元素
length返回表单中的表单元素数⽬
method设置或返回将数据发送到服务器的 HTTP ⽅法
name设置或返回表单的名称
target设置或返回表单提交的数据所显⽰的 frame 或窗⼝
onreset在重置表单元素之前调⽤事件处理⽅法
onsubmit在提交表单之前调⽤事件处理⽅法
表 2：form 对象常⽤⽅法
⽅法描述
reset()把表单的所有输⼊元素重置为它们的默认值
submit()提交表单
获取表单的⽅式有以下⼏种：
通过 document 的 forms 属性：document.forms[索引值]，索引值从 0 开始。
直接引⽤表单的 name 属性：document.formName。
通过表单的 ID：调⽤ document.getElementById() ⽅法。
通过表单的 name 属性：调⽤ document.getElementsByName() [表单索引]⽅法。
通过表单标签：调⽤ document.getElementsByTagName() [表单索引]⽅法。
通过选择器：调⽤ document.querySelectorAll() [表单索引]⽅法。
上述⽅法中，最常⽤的是第 2 种和第 3 种。
例如：<form name="form1" id="fm"> … </form> var fm = document.form1;
//获取表单⽅式：直接引⽤表单 name 属性 var fm = document.getElementById("fm"); //获取表单⽅式：通过 ID 获取表单
2. 表单元素对象
在 HTML 页⾯中 <form> 标签对之间包含了⽤于提供给⽤户输⼊或选择数据的表单元素。
JavaScript 运⾏引擎会⾃动为每⼀个表单元素标签建⽴⼀个表单元素对象。
表单元素按使⽤的标签可分为三⼤类：输⼊元素（<input>标签）、选择元素（<select>标签）和⽂本域元素（<textarea>标签）。
其中输⼊元素包括：⽂本框（text）、密码框（password）、隐藏域（hidden）、⽂件域（file）、单选框（radio）、复选框（checkbox）、普通按钮（button）、提交按钮（submit）、重置按钮（reset）；选择元素包括：多项选择列表或下拉菜单（select）、选项（option）；⽂本域只有 textarea ⼀个元素。
对表单元素对象的操作需要使⽤它们的属性或⽅法。
不同表单元素具有的属性和⽅法有些相同有些不同，下⾯将分别按公共和私有两⽅⾯来介绍它们的属性和⽅法。
1) 表单元素的常⽤属性
①表单元素常⽤的公共属性主要有以下⼏个：
disabled：设置或返回是否禁⽤表单元素。
注意：hidden 元素没有 disabled 属性。
id：设置或返回表单元素的 id 属性。
name：设置或返回表单元素的 name 属性。
注意：option 元素没有 name 属性。
type：对输⼊元素可设置或返回 type 属性；对选择和⽂本域两类元素则只能返回 type 属性。
value：设置或返回表单元素的 value 属性。
注意：select 元素没有 value 属性。
② text 和 password 元素具有以下⼏个常⽤的私有属性：
defaultValue：设置或返回⽂本框或密码框的默认值；
maxLength：设置或返回⽂本框或密码框中最多可输⼊的字符数；
readOnly：设置或返回⽂本框或密码框是否是只读的；
size：设置或返回⽂本框或密码框的尺⼨（长度）。
③ textarea 元素具有以下⼏个常⽤的私有属性：
defaultValue：设置或返回⽂本域元素的默认值。
rows：设置或返回⽂本域元素的⾼度。
cols：设置或返回⽂本域元素的宽度。
④ radio 和 checkbox 元素具有以下⼏个常⽤的私有属性：
checked：设置或返回单选框或复选框的选中状态；
defaultChecked：返回单选框或复选框的默认选中状态。
⑤ select 元素具有以下⼏个常⽤的私有属性：
length：返回选择列表中的选项数⽬；
multiple：设置或返回是否选择多个项⽬；
selectedIndex：设置或返回选择列表中被选项⽬的索引号。
注意：若允许多重选择，则仅返回第⼀个被选选项的索引号；
size：设置或返回选择列表中的可见⾏数。
⑥ option 元素具有以下⼏个常⽤的私有属性：
defaultSelected：返回 selected 属性的默认值；
selected：设置或返回 selected 属性的值；
text：设置或返回某个选项的纯⽂本值。
2) 表单元素常⽤的事件属性
①表单元素的公共事件属性主要有以下两个：
onblur：当表单元素失去焦点时调⽤事件处理函数；
onfocus：当表单元素获得焦点时调⽤事件处理函数。
② text、password、textarea 元素具有以下两个私有的事件属性：
onSelect：当选择了⼀个 input 或 textarea 中的⽂本时调⽤事件处理函数；
onChange：当表单元素的内容发⽣改变并且元素失去焦点时调⽤事件处理函数。
③radio、checkbox、button、submit 和 reset 表单元素具有以下⼀个私有的事件属性。
onClick：单击复选框、单选框、普通按钮、提交按钮和重置按钮时调⽤事件处理函数。
3) 表单元素常⽤的⽅法
①表单元素常⽤的公共⽅法主要有以下两个：
blur()：从表单元素上移开焦点；
focus()：在表单元素上设置焦点。
② text 和 password 元素具有以下⼀个私有的⽅法：
select()：选取⽂本框或密码框中的内容。
③ radio、checkbox、button、submit 和 reset 表单元素具有以下⼀个私有的⽅法：
click()：在表单元素上单击⿏标左键。
④ select 元素具有以下两个私有的⽅法：
add()：向选择列表添加⼀个选项；
remove()：从选择列表中删除⼀个选项。
4) 获取表单元素的⽅式
获取表单元素的⽅式有以下⼏种：
引⽤表单对象的 elements 属性：document.formName.elements[索引值]。
直接引⽤表单元素的 name 属性：。
通过表单元素的 ID：调⽤ document.getElementById() ⽅法。
通过表单元素的 name 属性：调⽤ document.getElementsByName()[表单元素索引]⽅法。
通过表单元素标签：调⽤ document.getElementsByTagName()[表单元素索引]⽅法。
通过选择器：调⽤ document.querySelectorAll()[表单元素索引]⽅法。
上述⽅法中，第 2～6 种⽅法都是⽐较常⽤的⽅法。
下⾯通过例 1 来演⽰表单及表单元素的获取以及它们的⼀些常⽤属性和⽅法的使⽤。
【例 1】使⽤ HTML DOM 操作表单及表单元素。
1.HTML 代码
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>使⽤HTML DOM操作表单及表单元素</title>
6. <script type="text/javascript"src="js/form.js"></script>
7. </head>
8. <body>
9. <h2>个⼈信息注册</h2>
10. <form id="form"name="form1">
11. <table border="1"width="630"cellpadding="5"cellspacing="0">
12. <tr><td>⽤户名</td><td><input type="text"name="username"/></td></tr>
13. <tr><td>密码</td><td><input type="password"name="psw1"/></td></tr>
14. <tr><td>确认密码</td><td><input type="password"name="psw2"/></td></tr>
15. <tr><td>性别</td><td>
16. <input type="radio"name="gender"value="⼥">⼥
17. <input type="radio"name="gender"value="男">男
18. </td></tr>
19. <tr><td>掌握的语⾔</td><td>
20. <input type="checkbox"name="lang"value="中⽂">中⽂
21. <input type="checkbox"name="lang"value="英⽂">英⽂
22. <input type="checkbox"name="lang"value="法⽂">法⽂
23. <input type="checkbox"name="lang"value="⽇⽂">⽇⽂
24. </td></tr>
25. <tr><td>个⼈爱好</td><td><select name="hobby"size="4"multiple="miltiple">
26. <option value="旅游">旅游</option>
27. <option value="运动">运动</option>
28. <option value="阅读">阅读</option>
29. <option value="上⽹">上⽹</option>
30. <option value="游戏">游戏</option>
31. <option value="⾳乐">⾳乐</option>
32. </select></td></tr>
33. <tr><td>最⾼学历</td><td><select name="degree">
34. <option value="-1">--请选择学历--</option>
35. <option value="博⼠">博⼠</option>
36. <option value="硕⼠">硕⼠</option>
37. <option value="本科">本科</option>
38. <option value="专科">专科</option>
39. <option value="⾼中">⾼中</option>
40. <option value="初中">初中</option>
41. <option value="⼩学">⼩学</option>
42. </select></td></tr>
43. <tr><td>个⼈简介</td><td><textarea name="info"rows="6"cols="45"></textarea>
44. </td></tr>
45. <tr><td colspan="2"align="center">
46. <input type="button"value="注册"id="regBtn">
47. <input type="reset"value="重置">
48. </td></tr>
49. </table>
50. </form>
51. </body>
52. </html>
2.JavaScript 代码（form.js）
1. window.onload =function(){
2. //声明变量
3. var sex,selDegree,infor;
4. var hobbies =new Array();//⽤于存储选择的爱好
5. var langs =new Array();//⽤于存储选择的语⾔
6. var fr = document.form1;//获取表单对象
7. ername.focus();//使⽤表单元素的focus()⽅法使⽤户名在页⾯加载完后获得焦点
8. var oBtn = document.getElementById('regBtn');
9. oBtn.onclick =function(){
10. //判断是否选择了性别，以及获取所选择的值
11. if(fr.gender[0].checked ==true){
12. sex ="⼥";
13. }else if(fr.gender[1].checked ==true){
14. sex ="男";
15. }
16. //将选择的语⾔存储在langs数组中
17. for(var i =0; i <4; i++){
18. if(ng[i].checked ==true)
19. langs.push(ng[i].value);
20. }
21. //将选择的爱好存储到hobbies数组中
22. for(i =0; i <6; i++){
23. if(fr.hobby.options[i].selected ==true)
24. hobbies.push(fr.hobby.options[i].value);
25. }
26. var index = fr.degree.selectedIndex;//获取被选中项的索引
27. selDegree = fr.degree.options[index].value;//将选择的学历存储在selDegree变量中
28. infor = .value;
29. var msg ="您注册的个⼈信息如下：\n⽤户名："+ername.value+"\n密码："
30. +fr.psw1.value+"\n性别："+sex+"\n掌握的语⾔有："+langs.join("、")+"\n爱好有："+
31. hobbies.join("、")+"\n最⾼学历是："+selDegree+"\n个⼈情况："+infor;
32. alert(msg);
33. };
34. };
上述脚本代码演⽰了直接通过 name 属性来获取表单及表单元素，以及它们的⼀些常⽤属性和⽅法的使⽤。
例如调⽤了 username 表单元素的 focus() ⽅法，使⽂本框在页⾯加载完成后获得焦点，这是⼀个提⾼⽤户体验的处理⽅法；此外通过表单元素的相关属性演⽰了不同类型的表单元素值的获取。
在运⾏得到的表单中输⼊数据，如图 1 所⽰。
图 1：在表单中输⼊数据
提交后得到图 2 所⽰结果。
图 2：显⽰⽤户输⼊的所有数据
为了减少数据⽆效时在客户端和服务端之间传输时的⽹络带宽并降低服务器负担，表单中的数据在提交给服务端处理之前通常需要先使⽤ JavaScript 进⾏数据的有效性校验，即在客户端需要校验表单数据的有效性，以保证提交的数据符合不能为空、长度范围、组成内容等有效性要求。
在客户端校验表单数据的有效性通常会使⽤ DOM 元素的⼀些属性以及正则表达式来进⾏。
有关正则表达式的内容之后介绍。