JavaScript表单编程

来源:互联网 发布:短信猫 java usb 编辑:程序博客网 时间:2024/05/29 19:58
对form元素进行脚本编写

获取表单元素
var frm = document.getElementById("form1");//dom
var frm = document.forms[0]; //bom
var frm = document.forms[“form1”];//对IE是通过name值获得,对firefox是通过ID获得
var frm=document.表单名
访问表单域(字段)
       —var frm = document.getElementById("form1");//dom
var field1 = frm.elements[0]; //第一个表单域,可用于遍历表单域
var field1 = frm.elements["name"];//得到名为name的表单域
var field1 = frm.name;//直接用名称得到表单域
var field1 = frm[“my name”];//得到name值有空格的表单域
var field1 = frm[0];//得到第几个表单元素

表单提交
<input type="submit" value="submit"> //提交按钮
<input type="image" src="submit.gif">//提交图片
doucment.forms["form1"].submit(); //使用js提交
提交表单时,会触发表单的submit事件,在onsubmit中返回false可以阻止表单提交。
使用submit()方法提交表单,不会触发submit事件。


表单重置
<input type="reset" value="reset"> //重置按钮
表单重置时,会触发表单的reset事件,在onreset中返回false可以阻止表单重置。
使用reset()方法提交表单,但仍会触发reset事件。

非隐藏表单字段的共有属性和方法
disabled:是否可用,当设置为不可用时,表单的值不会随表单提交
readOnly:只读。当设置之后,表单的内容不可改变,表单的值会随表单提交。只能用于文本框
form:得到表单
blur():使表单域失去焦点。
focus():使表单得到焦点。
blur事件:失去焦点时触发,并调用onblur()函数。
focus事件:得到焦点时触发,并调用onfocus()函数。


单行文本框text和多行文本框textarea
value属性得到或设置文本内容。
value.length可以得到文本长度。
选择文本框
select():选择文本内容。
文本框事件
blur,focus事件
change事件:用户改变文本框的值,并失去焦点后触发。注意和blur事件的区别
select事件:文本被选中,或select()被调用时触发。
实现自动选择文本
onfocus = "this.select();"


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

访问选项
listbox.options[0].firstChild.nodeValue;//取得选项文本
listbox.options[0].getAttribute("value");//取得选项值
listbox.options[0].text;//获得文本
listbox.options[0].value;//获得值
listbox.options.length;//获取选项数量
listbox.selected; //选项是否被选中
listbox. selectedIndex;
获得选择的序号,未选返回-1
multiple=multiple设为多选时,获得第1个。

添加选项
使用DOM添加节点。
删除选项
[BOM]listbox.options[1]=null;
[DOM]listbox.remove(0);
在不同的列表框中移动选项
DOM操作节点完成
重新排序选项
使用insertBefore(op1,op2)


checked属性:是否被选中
defaultChecked属性:默认是否被选中
click():模仿点击,会触发click事件,改变选择状态。
对于复选框,可以进行进行遍历操作。


表单验证

一个常用的功能,能有效降低服务器负担。
捕获错误的时机
错误发生前
keyPress事件
错误发生时
change事件
错误发生后
submit事件


表单验证最佳实践

提示应对用户有帮助
不要用alert()
长度验证时使用maxLength比用js验证更好。
一次显示所有错误
早点捕获错误
如果拿不准较验规则,就不要太严格。



0 0