javascript基础：表单处理1

一、表单介绍

为了分担服务器处理表单的压力, JavaScript 提供了一些解决方案,从而大大打破了处处依赖服务器的局面。

在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法:。

获取表单<form>对象的方法有很多种,如下:

document.getElementById('myForm');//使用 ID 获取<form>元素
document.getElementsByT agName('form')[0] ;//使用获取第一个元素方式获取
document.forms[0];//使用 forms 的数字下标获取元素
document.forms['yourForm'];//使用 forms 的名称下标获取元素
document.yourForm;//使用 name 名称直接获取元素

PS:最后一种方法使用name名称直接获取元素,已经不推荐使用,这是向下兼容的早期用法。问题颇多,比如有两个相同名称的 ,变成数组;而且这种方式以后有可能会不兼容 。 

二、提交表单

首先在html页面创建一个表单

<form id="myform" name="yourform" action="">
    姓名:<input type="text" name="user"/>
    <!--点击提交按钮进行提交-->
    <!--说明：按钮的类型是submit，但是submit事件不是按钮的绑定事件而是form的绑定事件-->
    <!--因为form不可见，所以通过按钮的方式来实现它。此时点击提交按钮就可以提交-->
    <input id="submitButton" type="submit" name="button" value="提交"/>
    <strong id="strong">通过设置我也能提交</strong>
</form>

在js文件中进行处理

1、form的submit事件

function preDef(evt) {
    var e = evt || window.event;
    if (e.preventDefault) {//W3C,阻止默认行为,放哪里都可以
        e.preventDefault();
    }
    else {//IE,阻止默认行为
        e.returnValue= false;
    }
}

window.addEventListener('load',function(){
    //得到form对象
    var fm = document.getElementById('myform');
    //form对象有提交功能，submit事件，并且submit事件是默认行为
    fm.addEventListener('submit',function(evt){
        //取消form的默认行为，将submit事件取消
        //此时在点击提交按钮就不能提交了。
       preDef(evt);
    });
},false);

//验证提交事件是不是type = "submit"的提交按钮的事件
window.addEventListener('load', function () {
   var submitBtn = document.getElementById('submitButton');
    //给提交按钮取消submit默认事件是无效的，因为按钮没有submit事件，submit事件是form的
    //执行下面代码还是会正常提交，因为form的默认submit事件没有被取消
    submitBtn.addEventListener('submit',function(evt){
        preDef(evt);
    });
    //ps：可以证明提交按钮没有submit事件，submit事件是form的。
},false);

2、其它标签实现submit事件

//如何让一个没有提交功能的元素具有提交功能
window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    //strong标签不具有提交功能
    var str = document.getElementById('strong');
    //给strong标签添加点击事件，让其具有提交功能
    str.addEventListener('click',function(evt){
        //让表单执行提交功能
        fm.submit();
    });
    //PS：通过以上方法可以让任何标签都可以进行提交
},false);

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    document.addEventListener('keydown',function(evt){
        var event = evt || window.event;
        //实现control+shift提交
        if(event.ctrlKey&&event.shiftKey){
            fm.submit();
        }
    });
});

PS:在表单中尽量避免使用 name="submit"或 id="submit"等命名,这会和 submit()方法发生冲突导致无法提交。 

3、解决重复提交，减轻服务端的压力(当链接超时时，用户可能会不停的点击，此时就需要采取方法来避免这种重复的提交)。

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var flag = false;//设置一个标识
    fm.addEventListener('submit',function(evt){
        //禁用默认的提交事件
        preDef(evt);
        //得到提交按钮
        var subBtn = document.getElementById('submitButton');
        subBtn.disabled = 'disabled';//方法一：禁用按钮 阻止按钮提交
        if(flag)return;
        flag = true;//方法二：将设置的标识设为true 阻止所有的提交 包括键盘
        alert('点击');
        //模拟超时
        setTimeout(function(){
            //手动提交表单
            fm.submit();
            //提交成功之后，将按钮禁用取消
            //subBtn.disabled = 'true';
        },5000);
    },false);
},false);

三、重置表单，reset事件 (现在基本上已经不会使用重置事件)

用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的 Web已经很少去使用了 。因为用户已经填写好各种数据 ,不小心点了重置就会全部清空 ,用户体验极差。

有两种方法调用 reset 事件,第一个就是直接 type="reset"即可;

第二个就是使用 fm.reset()方法调用即可。 

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    fm.addEventListener('reset',function(){
        alert('lee');
    });
    //点击任何地方就执行方法
    document.addEventListener('click',function(){
        //表单的重置事件 类似于提交  这个事件是form的 而不是重置按钮的
        //<input type="reset" value="重置"/>//reset事件不是重置按钮的。
        fm.reset();
    },false);

},false);

四、表单字段

如果想访问表单元素,可以使用之前章节讲到的 DOM 方法访问。但使用原生的 DOM访问虽然比较通用,但不是很便利。

表单处理中,我们建议使用 HTML DOM,它有自己的elements 属性,该属性是表单中所有表单元素的集合。不是表单元素会被忽略。

PS：表单控件是什么？ form里面的input submit textarea select 这些叫做表单控件，其实就是表单元素标签 

PS：通过表单集合获取第一个元素，非表单控件会被忽略掉

fm.elements[0];//获取第一个表单字段元素
fm.elements['user'];//获取 name 是 user 的表单字段元素//获取所有表单字段的数量
fm.elements.length ;如果多个表单字段都使用同一个 name,那么就会返回该 name 的 NodeList 表单列表。
fm.elements['sex']; //获取相同 name 表单字段列表

window.addEventListener('load',function(){
    var fm = document.getElementById('myform');
    var subEle = fm.elements;//表单元素集合
    //var length = fm.length;//表单元素集合的长度 不推荐这种写法
    var length = fm.elements.length;//使用这种写法
    //var ele = fm[0];//不推荐这种写法
    var ele = fm.elements[0];//使用这种写法
    var ele1 = fm.elements['sex'][0];
    alert(ele1);
    alert(ele1.value);
    alert(ele1.name);
    alert(ele1.form);//得到所属的form对象
    ele1.disabled = true;//禁用
    ele1.type = 'chekbox';//不推荐修改此属性

    var user = fm.elements['user'];
    user.focus();//主动获得焦点 一进来光标就在输入框内
    user.blur();//主动失去焦点 将焦点从输入框移出
    
    //点击获得焦点是调用
    user.addEventListener('focus',function(){
        alert('移入光标');
    },false);
    //点击失去焦点时调用
    user.addEventListener('blur',function(){
        alert('移出光标');
    },false);
    //输入框内容改变并失去焦点时调用
    user.addEventListener('change',function(){
        alert('改变了文本框');
    });
},false);