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 == i) {

                v2.options.length = 1;           //使s2的值变为2

                for (var j in arr[i]) {

                    v2.add(new Option(arr[i][j]), null)

                }

            }

        }

    }