JavaScript 表单编程

JavaScript 表单编程

1. 如何获取 页面中的表单

2. 对文本框 进行脚本编写

3. 对列表框和 组合框进行脚本编写

4. 对复选框和单选框 进行脚本编写

5. 表单验证

---

1. 如何获取 页面中的表单

1.1 获取表单的 方式

1.1.1 常用

document.getElementById(id名称);

document.forms([0])

1.1.2 少用

document.forms(name属性)

document.表单名称

1.1.3 间接获得

document.getElementByName

document.getElementByTagName

document.lastChild 等等

1.2 访问表单字段

1.2.1 通过form 对象 来获得表单的字段

方式

form1.elements[0] 获得form表单的第一个字段

1.2.2 还可以通过校本为 一个字符串来进行访问

form1.elements["ada"] 获得form表单的第一个字段

这个情况他的参数可用 通过字符串连接进行 访问

1.2.3 还可以通过通用的方式,就 document.getElementById来进行 访问 from表单中的属性

1.3 表单字段的共性

1.3.1 disabled

这个可以控制,一个字段的 可用性,也就是可以 不可以编辑的问题

1.3.2 form

该属性返回包含字段的表单

1.3.3 blur()

失去焦点的时候 触发一个世界,

1.3.4 focus()

获得焦点的时候, 产生的事件

1.4 表单提交

1.4.1 不会触发,默认的subMit 事件

还可以通过: onsubmit 事件进行提交

1.4.2 会触发onsubmit 事件的方式

使用submit , 提交按钮的方式 进行提交

使用 image src ="图片路径" 的方式提交

1.5 表单重置

1.5.1 可以使用reset按钮的方式

1.5.2 还可以使用reset事件的方式

---

2. 对文本框 进行脚本编写

2.1 获取/更 改文本框的值

2.1.1 使用document.getElementById 的方式获得一个元素对象, 再点他的value属性,修改或者是获得 就是这个元素的value值

2.2 选择文本 (选中一部分)

2.2.1 使用所有元素都 支持的一个方法, select()

2.3 文本框事件

2.3.1 change

修改文本

2.3.2 select

选中文本

2.3.3 blur()

失去焦点的时候 触发一个世界,

2.3.4 focus()

获得焦点的时候, 产生的事件

2.3.5 change 和 blur 的区别

blur是在失去焦点的 时候,触发该事件

change 他是在失去焦点和 修改文本值同时发生的情况下, 才会触发

2.4 自动选中文本

2.4.1 是使用 onfocus 事件

---

3. 对列表框和 组合框进行脚本编写

3.1 访问选项

3.1.1 直接通过下表来进行访问,不同的元素

3.2 获取/ 更改选中项

3.2.1 是使用selectedIndex 属性来进行判断是否被选中了

3.3 添加选项

3.3.1 直接使用appendChild("元素名称")

3.4 删除选项

3.4.1 就是把它值赋值为null

3.4.2 还有就是使用remove(下标)

---

4. 对复选框和单选框 进行脚本编写

4.1 checked

4.1.1 获得键值码

4.2 defaultChecked

4.2.1 初始化页面时, 时候被选中

4.3 click()

4.3.1 模仿按钮点击

4.4 得到单选框的值

4.4.1 直接通过标签元素,value 进行获取

4.5 获得复选框的值

4.5.1 通过 checked 这个方法进行获取

---

5. 表单验证

5.1 在错误发生之前

5.1.1 keypress

5.2 在错误发生时

5.2.1 change

这个可以和onblur失去焦点事件,来进行 验证数据的合法性

5.3 在错误发生之后

5.3.1 submit

在提交之后进行验证标点数据

Last updated: 2010-6-3	Top of Page