社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > JavaScript 表單處理實作程式碼_基礎知識

JavaScript 表單處理實作程式碼_基礎知識

WBOY
發布： 2016-05-16 16:04:26
原創
1243 人瀏覽過

一 表單介紹

在HTML中,表單是由

元素來表示的,而在JavaScript中,表單對應的則是HTMLFormElement類型;

// HTMLFormElement繼承了HTMLElement;因此它擁有HTML元素具有的預設屬性,別且還獨有自己的屬性與方法;
HTMLFormElement屬性與方法
屬性或方法 說明
acceptCharset 伺服器能夠處理的字元集;
action 接受請求的網址;
elements 表單中所有控制項的集合;
enctype 請求的編碼類型;
length 表單中控制項的數量;
method 要傳送的HTTP請求類型,通常是'get'或'post';
name 表單的名稱;
target 用於發送請求和接受回應的視窗名稱;
reset() 將所有表單重設;
submit() 提交表單;

 1.取得表單物件;
document.getElementById('myForm'); // 使用ID取得

元素;
document.getElementsByTagName('form')[0]; // 使用取得form元素集合裡的第一個元素;
document.forms[0]; // 使用forms的數字下標取得元素;
document.forms['myForm']; // 使用forms的名稱下標取得元素;

2.提交表單

(1).透過事件物件,可以阻止submit的預設行為,submit事件的預設行為就是攜帶資料跳到指定頁面;

複製程式碼 程式碼如下:

    addEvent(fm,'submit',function(evt){
        preDef(evt);
    });

(2).我們可以使用submit()方法來自訂觸發submit事件;也就是說,不一定非要點擊submit按鈕才能提交;

複製程式碼 程式碼如下:

    if(e.ctrlKey && e.keyCode ==13){
        fm.submit();                       地     }
    // PS:在表單中盡量避免使用name="submit"或id="submit"等命名,這會和submit()方法發生衝突導致無法提交;

(3).重複提交

// 當一條資料提交到伺服器的時候會出現延遲等長時間沒反映,導致用戶不停的點擊提交,
// 從而使得重複提交了很多相同的請求,或造成錯誤或寫入資料庫多條相同資訊;

複製程式碼 程式碼如下:
    addEvent(fm,'submit',function(evt){        // 類比伺服器延遲;
        preDef(evt);
        setTimeout(function(){                 // 3秒後才處理以方式提交至伺服器;
            fm.submit();
        },3000);
    });
// 解決重複提交方案

// 第一種:提交之後,立刻停用點擊按鈕;
    document.getElementById('sub').disabled = true;      // 停用按鈕;
// 第二種:提交之後,取消後續的表單提交操作;
    var flag = false;                                  if(flag == true)return;                                 flag = true;                              



3.重設表單

4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合;
    fm.elements[0];                                     // 获取第一个表单字段元素;
    fm.elements['user'];                                // 获取name值是user的表单字段元素;
    fm.elements.length;                                 // 获取所有表单字段的数量;

(1).共有的表单字段属性
// 除了

元素之外,所有表单字段都拥有相同的一组属性;
属性                     说明
disabled         布尔值,表示当前字段是否被禁用;
form             指向当前字段所属表单的指针,只读;
name             当前字段的名称;
readOnly         布尔值,表示当前字段是否只读;
tabIndex         表示当前字段的切换;
type             当前字段的类型;
value            当前字段的值;
    fm.elements[0].value;                               // 获取和设置value;
    fm.elements[0].disabled = true;                     // 禁用当前字段;

(2).共有的表单字段方法
方法                     说明
focus()          将焦点定位到表单字段里;
blur()           从元素中将焦点移走;

(3).共有的表单字段事件


事件名                     说明
blur             当字段失去焦点时触发;
change           对于和