表单脚本
——《JavaScript高级程序设计》Chapter14学习笔记
1.表单基础
1.取得表单:document.forms
var form1=document.forms[0];
var form2=document.forms["form's name"];
2.提交表单：
三种提交按钮
（1）<input type="submit" value="Submit">
（2）<button type="submit">Submit</button>
（3）<input type="image" src="xx.gif">
只要表单中存在上述任何一种按钮，在相应表单控件拥有焦点的情况下，按回车就可以提交表单。
submit事件
以上述按钮方式提交表单时，浏览器会在请求发送给服务器之前触发submit事件。这样就有机会验证表单是否提交。
以下代码可阻止表单提交
var form=document.forms[0];
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
Event.preventDefault(event);
})
submit()方法提交表单
-
该方式提交的表单无需表单包含提交按钮。
-
该方式提交表单不会触发submit事件。
var form=document.forms[0];
form.submit();
提交表单的问题
用户可能会重复提交表单，带来问题。
解决办法是：第一次提交后就禁用提交按钮。
３.重置表单
两种重置按钮
<input type="reset" value="Reset">
<button type="reset">Reset</button>
初始值为空的字段就恢复为空；带有默认值的字段就恢复为默认值。
reset事件
单击重置按钮会触发reset事件。可利用这个机会取消重置操作。
取消重置操作按钮：
var form=document.forms[0];
EventUtil.addHandler(form,"reset",function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
})
reset()方法
-
也可通过JS的reset方法重置表单。
-
和submit()方法不会触发submit事件不同，该方法也会触发reset事件。
form.reset()
4.表单字段
(1)取得表单字段
form.elements集合包含着表单中的所有字段，如input、textarea、button、fieldset。
var field1=form.elements[0];//取得表单中第一个字段
var field2=form.elements["field1"]//取得名为field1的字段
var count=form.elements.length;//取得表单中包含的字段数量
(2)共有的表单字段属性
- disabled:布尔值，表示当前字段是否被禁用
- form:指向当前字段所属表单，只读
- name:当前字段的名称
- type:当前字段类型，如“checkbox","radio"等
- value:当前字段提交给服务器的值
除form外，以上属性都可修改。
(3)动态修改字段属性和方法
field1.value="Another value";//修改value属性
console.log(field1.form==form);//检查字段form属性
field1.focus();//把焦点设置到当前字段
field1.disabled=true;//禁用当前字段
动态操作表单有用实例：避免重复提交表单
EventUtil.addHandler(form,"submit",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var btn=target.elements["submit-btn"];//取得提交按钮
btn.disabled=true;//禁用它
});
注意：只能用侦听submit事件来禁用提交按钮，不能用click事件，因为click事件和提交行为之间有时差。对于一先触发click事件再提交的浏览器，如果在提交之前禁用按钮，则永远都不会提交表单。
（4）共有的表单字段方法：focus()和blur()
eg:页面加载后自动聚焦于第一个字段
EventUtil.addHandler(window,"load",function(event){
if (element.autofocus!==true) {//如果表单字段的html中已经有
document.forms[0].elements[0].focus();
}
})
以上代码在这些情况下会出错：
- 第一个字段为input且其type="hidden"
- 第一个字段的CSS的display:none
- 第一个字段的CSS的visibility:hidden
H5新增属性：autofocus
支持autofocus的有Firefox4+、Safari5+、Chrome和Opera9.6
(5)共有的表单字段事件：blur、change、focus
- blur:当字段失去焦点时触发
- change:注意！！对于input和textarea元素，在它们失去焦点且value值改变时触发；对于select元素，在其选项改变时触发。
- focus:当前字段获得焦点时触发
利用blur和focus事件可改变用户界面,利用change事件可以验证用户在字段中输入的数据。eg:
var textbox=document.forms[0].elements[0];
EventUtil.addHandler(textbox,"focus",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if (target.style.backgroundColor!="red") {
target.style.backgroundColor="yellow";
}
});
EventUtil.addHandler(textbox,"blur",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)) {//如果含有非数值字符，则该字段在失去焦点时背景颜色变为红色
target.style.setProperty("background-color","red");
}
else{
target.style.removeProperty("background-color");
}
})
EventUtil.addHandler(textbox,"change",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)) {//如果输入了含有非数值字符，则该字段景颜色变为红色
target.style.setProperty("background-color","red");
}
else{
target.style.removeProperty("background-color");
}
})
