码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript表单编程

时间:2014-11-10 00:59:54      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:io   ar   os   使用   java   sp   for   strong   on   

 

一、    对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)

                }

            }

        }

    }

JavaScript表单编程

标签:io   ar   os   使用   java   sp   for   strong   on   

原文地址:http://www.cnblogs.com/p719027365/p/4086197.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!