JavaScript高级程序设计之表单基础

A FORM

<form id='form' action='http://a-response-url' method="post">



    <!--maxlength 最大值  placeholder 占位符  autofocus 自动聚焦-->

    <input type='text' name='name' size='20' maxlength='10' placeholder='initial' autofocus /><br />

    <input type='text' name='phone' size='3' maxlength='3' />

    <input type='text' name='phone' size='3' maxlength='3' />

    <input type='text' name='phone' size='4' maxlength='4' /><br />



    <!--旧版浏览器会自动设置type为text-->

    <input type='email' name='email' required /><br />

    <select name='fruit'>

        <option value='a'>apple</option>

        <option value='b' selected>banner</option>

        <option value='c'>color fruit</option>

    </select><br />



    <textarea name='textbox' rows='5' cols='20' maxlength="50">textbox with maxlength</textarea><br />

    <button type='reset' id="resetBtn">reset</button>

    <button type='submit' id="subBtn">submit</button>

</form>

表单的elements属性

// 获取表单元素

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



// 返回表单控件的个数

var eleNum = form.elements.length;



// 返回控件中name="phone"的元素

var phone = form.elements["phone"];

自动聚焦的兼容

// autofocus

var autofocusEle = form.elements[0];



if (autofocusEle.autofocus !== true) {

    autofocusEle.focus();

}

占位符的兼容

// placeholder for ie\10 with jquery 

if (!("placeholder" in document.createElement("input"))) {



    // focus and blur

    $("[placeholder]").on("focus", function () {

        if ($(this).val() === $(this).attr("placeholder")) {

            $(this).val("");

        }

    }).on("blur", function () {

        if ($(this).val() === "") {

            $(this).val($(this).attr("placeholder"));

            $(this).css("color", "graytext")

        }

    }).blur();



    // when submit dont send the placeholder value

    $("[placeholder]").parent("form").submit(function () {

        $(this).find("[placeholder]").each(function () {

            if ($(this).val() === $(this).attr("placeholder")) {

                $(this).val("");

            }

        });

    });

}

表单的自动提交：

    当form中处于focus状态时（textarea除外），并且form中有type="submit"的提交按钮；那么回车就会触发表单提交事件，如同单击提交按钮，进行表单提交。

表单提交的时候发生了什么？

    1、成功控件

        浏览器并不是将所有的表单控件全部发送到服务器的，而是会查找所有的【成功控件】，只将这些成功控件的数据发送到服务端。
        那么，什么是成功控件呢？简单说，成功控件就是：每个表单的控件都应该有一个name属性和【当前值】，在提交时，它们将以
        【name=value】的形式将数据提交到服务器端，也即【action】的地址。这个算法逻辑由浏览器自身来处理。
         对于一些特殊情况，成功控件还有以下规定：
        a.控件不能是禁用状态，即指定【disabled="disabled"】的控件不是成功控件。
        b.对于【checkbox】来说，只有被勾选的才算是成功控件。
        c.对于【radio button】来说，只有被勾选的才算是成功控件。
        d.对于【select】控件来说，只有被勾选的项才算是成功控件，name是select标签的属性。
        e.对于【file】上传文件控件来说，如果它包含了选择文件，那么它将是成功控件。  

    2、提交方式

        如果是【post】，那么表单数据将放在请求体中被发送出去。

        如果是【get】，那么表单数据将会追加到查询字符串中，以查询字符串的形式提交到服务端。

        表单通常还是以post方式提交比较好，这样可以不破坏url，况且url还有长度限制及一些安全性问题。

    3、数据编码

        控件输入的内容并不是直接发送的，而是经过一种编码规则来处理的。目前基本上只会使用两种编码规则：application/x-www-form-urlencoded 和 multipart/form-data

        这两个规则的使用场景简单说就是：后者在上传文件时使用，其他情形则默认使用前者。

        使用地点：<form action="" method="" enctype="multipart/form-data">    =>上传文件

    4、浏览器提交表单时的四个阶段

        a.识别所有的成功控件

        b.为所有的成功控件创建一个数据集合，它们包含【control-name/current-value】这样的键值对。

        c.按照【form.enctype】指定的编码规则对前面准备好的数据进行编码。编码规则放在请求中，用content-type指出。

        d.提交编码后的数据。

　注：表单的直接提交

// 此方式将直接触发表单的提交行为而不做任何验证

// 所以在表单验证后可直接触发此事件，直接提交表单

// （html 中不能出现id=submit的元素，否则会产生混乱！）

document.getElementById("form").submit();

 

关于AJAX提交表单

// ajax提交表单提供了更好的可控性，示例应用了jquery

$("#form").on("submit", function (e) {



    // 阻止浏览器的默认提交行为

    e.preventDefault();



    $.ajax({

        type: "post",

        url: $(this).attr("action"),

        data: $(this).serialize(),    // 模拟浏览器的成功控件刷选逻辑，搜罗键值对  （注意：name属性相同时会同时发送！这是checkbox的逻辑）
 // "name=%EF%BF%A5dd&phone=aa&phone=bb&phone=cc&email=kui_002%40126.com&fruit=b&textbox=textbox+with+maxlen%0D%0Agth"

        error: function () {},

        success: function (res) {}

    })

});