表单验证(-)

浏览: 202 发布日期: 2016-08-18 分类: javascript

这里是表单验证的第一课:主要讲授有关表单的基础知识。
关于表单验证的更多知识可以参考《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)<input type="submit" value='提交'>
 <!--自定义提交按钮-->
(2)<button type="submit">提交</button>
<!--图像按钮-->
(3)<input type="image" src="graph.gif">

以上方式提交表单时,浏览器会在将请求发送给服务器之前会触发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)<input type="reset" value='提交'>
 <!--自定义提交按钮-->
(2)<button type="reset">提交</button>

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

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是有序表,其中包含着表单中的所有字段,例如:<fieldset>、<input>、<textarea>、<select>。每个表单字段在elements集合中出现的顺序与它们出现在标记中的顺序相同,可以按照位置和name属性来访问到。

var form=document.getElementById('myForm);
var filed1=form.elements[0];//获得表单中的一个字段
var filed2=form.element['textbox'];//获得表单中名为textbox的字段
var len=form.elements.length;//取的表单中包含的字段的数量

还有focus()和blue()方法 :

form.elements[0].focus(): 表单字段获取焦点
form.elements[0].blur():表单字段获取焦点

共有的表单属性:

disabled:布尔值,表示当前表单是否被禁用
form:指向当前字段所属表单的指针
name:当前字段的名称
type:当前字段的类型
value:当前字段将别提交给服务器的值
此外还有:readOnly、tabIndex

<script type="text/javascript">
    EventUtil.addHandler(form,'submit',function(event){
        //获取目标元素
        var event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        //获取提交按钮
        var btn=target.element['submit-btn'];
        //禁用提交按钮
        btn.disabled=true;
    });

</script>

3.共有的表单字段方法:
focus:当前字段获得焦点时触发
blur:当前字段失去焦点时触发
change:在它们失去焦点并且value值发生变化时触发
对于<input> <textarea>元素,当它们从获得焦点到失去焦点且value值改变时,才会触发change。对于<select>元素,只要用户选择了不同的选项,就会触发change事件。

返回顶部