首页 > 代码库 > JavaScript表单编程
JavaScript表单编程
一、 对form元素进行脚本编写
1、 获取表单
Var oForm=Document.getElementById(“form1”)
Var oForm=Document.form[i]—第i个表单
Var oForm=Document.form[“formz”]—名为formz的表单
2、 访问表单字段
oForm.element[i]
oForm.Element[“textbox1”]
oForm.textbox1
3、 表单字段共性
Disabled属性：指示一个表单控件是否可用
Form属性：返回包含字段的表单
Blur()方法:导致表单字段失去焦点
Focus()方法：导致表单字段获得焦点
Blur事件：当表单失去焦点时发生该事件，随后执行onblur事件处理程序
Focus事件：当表单获得焦点时发生该事件，随后执行onFocus事件处理程序
4、 表单提交
调用submit()方法：oForm.submit
使用submit按钮：<input type=”submit” />
阻止表单提交，只需将提交的返回值设为false即可：
<form method=”post” action=”#” onsubmit=”return false”>
5、 表单重置
使用reset按钮：<input type=”reset” />
调用submit()方法：oForm. reset()
二、 对文本框进行脚本编写
单行版本<input type=”text”>
多行版本<textarea/>
1、获取/更改文本框的值
Value属性
Lentgh属性
2、选择文本框
Select（）方法
Focus（）方法
3、文本框事件
Blur事件
Focus事件
Change事件
Select事件
三、 对列表框和组合框进行脚本编写
1、 访问选项
Text：返回option元素的显示文本
Value：返回option元素的值
Index：指示该option在option集合中的位置
Length：判断有多少选项
2、 获取/更改选中项
SelectedIndex属性：返回当前被选中选项的索引
Selected属性：指示某个选项是否被选中
3、 添加选项
第一步：定义一个带三个参数的方法，三个参数分别是要添加选项的列表框、要添加的选项名称和要添加选项的值
第二步：创建一个option元素和文本节点，将后者分配给前者
第三步：设置option元素的value属性
第四步：通过appendChild（）方法将其添加到select元素中
4、 移除选项
1） 使用option集合，将要移除的选项设置为null
2） 利用select元素的remove（）方法
5、 重新排序
调用insertBefore（）方法
四、 对复选框和单选框进行脚本编写
Checked—布尔值，指示控件状态
DefaultChecked—布尔值，指示页面装载时控件是否被选中
Click（）--模仿按钮点击，改变控件状态，对应事件是onclick。
我们可以通过value属性来获得单选框和复选框的值。
五、 表单验证
1、 使用submit事件在错误发生之后捕获错误
2、 使用change事件在错误发生时捕获错误
3、 使用keypress事件在错误发生之前捕获错误
表单校验最佳实践
1） 必须对用户有帮助
2） 不要让人讨厌
3） 只要有可能就用HTML代替JavaScript
4） 一次显示所有的错误
5） 尽早捕获错误
6） 如果拿不准就不要太严格
省市级联下拉框 相关代码
Html代码
<form action="">
<label for="s1"></label><select name="" id="s1" onchange="f();">
<option value="">1</option>
</select>
<label for="s2"></label><select name="" id="s2">
<option value="">2</option>
</select>
</form>
--------创建两个select元素
Js代码
var arr = [];
arr[‘a‘] = [‘a1‘, ‘a2, ‘a3‘];
arr[‘b‘] = [‘b1‘, ‘b2‘, ‘b3‘];
arr[‘c‘] = [‘c1‘, ‘c2‘, ‘c3‘];
arr[‘d‘] = [‘d1‘, ‘d2‘, ‘d3‘];
for (var i in arr) { //将数组arr[]中的值依次添加到s1中
document.getElementById("s1").add(new Option(i), null)
}
function f() {
var v1 = document.getElementById("s1");
var v2 = document.getElementById("s2");
for (var i in arr) {
//每当s1的值发生改变时s2中的值也发生相应的改变
if (v1.value =http://www.mamicode.com/= i) {
v2.options.length = 1; //使s2的值变为2
for (var j in arr[i]) {
v2.add(new Option(arr[i][j]), null)
}
}
}
}
JavaScript表单编程