资讯专栏INFORMATION COLUMN

表单验证(-)

cppowboy / 1814人阅读

摘要:这样我们就有机会验证表单数据,并据以决定是否允许表单提交。下面代码会阻止表单提交取得时间对象阻止默认事件注意以这种方式提交表单,不会触发事件。

这里是表单验证的第一课:主要讲授有关表单的基础知识。
关于表单验证的更多知识可以参考《javascript高级程序设计》之第14章:表单脚本

1.表单事件

submit():提交表单
reset():将所有表单域重置为默认值

(1).取得form元素的引用

   (1)var form=document.getElementById("form1");
    (2)var form=document.getElementByTagName("form1");
    (3)var forms=document.forms//取得页面中所有表单
    var form=document.forms[0]//取得页面中第一个表单
    var form=document.forms["form2"//取得页面中name="form2"的表单

(2).提交表单


(1)
 
(2)

(3)

以上方式提交表单时,浏览器会在将请求发送给服务器之前会触发submit事件。这样我们就有机会验证表单数据,并据以决定是否允许表单提交。
在编写表单提交代码之前,我们需要先了解一下浏览器兼容代码,代码文件EventUtil.js内容就发布在我的文章里,有兴趣的可以拿来好好读一读,这里不再阐述,直接使用。
下面代码会阻止表单提交:

var form=document.getElementById("myForm);
EventUtil.addHandler(form,"submit",function(event){
    //取得时间对象
    var event=EventUtil.getEvent(event);
    //阻止默认事件
    EventUtil.preventDefault();  
})

注意:

   var form=document.getElementById("myForm);
    form.submit();

以这种方式提交表单,不会触发submit事件。

(3)重置表单


(1)
 
(2)

下面代码会阻止表单重置:

var form=document.getElementById("myForm);
EventUtil.addHandler(form,"reset",function(event){
    //取得时间对象
    var event=EventUtil.getEvent(event);
    //阻止默认事件
    EventUtil.preventDefault();  
})

注意:

   var form=document.getElementById("myForm);
    form.reset();

与submit事件不同,以这种方式提交表单,将会触发reset事件。

2.表单字段
可以像访问页面中其他元素一样,使用原生DOM方法访问表单元素。此外,每个表单都有Elements属性,该属性是表单中所有表单元素(字段)的集合。这个elements是有序表,其中包含着表单中的所有字段,例如: