JavaScript 表單處理實現代碼，javascript表單

JavaScript 表單處理實現代碼，javascript表單

一 表單介紹

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

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

 1.擷取表單<form>對象;
document.getElementById('myForm'); // 使用ID擷取<form>元素;
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();                           // 判斷按住了ctrl和enter鍵觸發提交;
    }
    // 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.重設表單

// 使用者點擊重設按鈕時,表單會被初始化;// 雖然這個按鈕還得以保留,但目前Web已經很少去使用了;因為使用者填好資訊後,不小心點擊了重設就會全部清空,使用者體驗極差;// 有兩種方法調用reset事件:第一個就是直接type="reset"即可;第二個就是使用fm.reset()方法調用;  <input type="reset" value="重設" />          // 不需要JS代碼即可實現;  addEvent(document,'click',function(){    fm.reset();                   // 使用JS方法實現重設;  });

4.表單欄位

// 表單處理中,建議使用HTMLDOM,它有自己的elements屬性,該屬性是表單中所有元素的集合;
    fm.elements[0];                                     // 擷取第一個表單欄位元素;
    fm.elements['user'];                                // 擷取name值是user的表單欄位元素;
    fm.elements.length;                                 // 擷取所有表單欄位的數量;

(1).共有的表單欄位屬性
// 除了<fieldset>元素之外,所有表單欄位都擁有相同的一組屬性;
屬性                     說明
disabled         布爾值,表示當前欄位是否被禁用;
form             指向當前欄位所屬表單的指標,唯讀;
name             當前欄位的名稱;
readOnly         布爾值,表示當前欄位是否唯讀;
tabIndex         表示當前欄位的切換;
type             當前欄位的類型;
value            當前欄位的值;
    fm.elements[0].value;                               // 擷取和設定value;
    fm.elements[0].disabled = true;                     // 禁用當前欄位;

(2).共有的表單欄位方法
方法                     說明
focus()          將焦點定位到表單欄位裡;
blur()           從元素中將焦點移走;

(3).共有的表單欄位事件

事件名                     說明
blur             當欄位失去焦點時觸發;
change           對於<input>和<textarea>元素,在改變value並失去焦點時觸發;對於<select>元素,在改變選項時觸發;
focus            當前欄位擷取焦點時觸發;

// 利用focus事件修改文字框的背景色;// 利用change事件在使用者輸入非數值字元時再次修改背景色;  var bextbox = document.forms[0].elements[0];  EventUtil.addHandler(textbox,'focus',function(evt){    evt = EventUtil.getEvent(evt);    var target = EventUtil.getTarget(evt);    if(target.style.backgroundColor != 'red'){      target.style.backgroundColor = 'yellow';    // 選中狀態時文字框的背景是黃色;    }  });  EventUtil.addHandler(textbox,'blur',function(evt){   // 失去焦時間點事件;    evt = EventUtil.getEvent(evt);    var target = EventUtil.getTarget(evt);    if(/[^\d]/.test(target.value)){           // 輸入非數值字元時;      target.style.backgroundColor = 'red';      // 文字框背景變成紅色;    }else{      target.style.backgroundColor = '';    }  });  EventUtil.addHandler(textbox,'change',function(evt){  // 改變value值且失去焦時間點事件;    evt = EventUtil.getEvent(evt);    var target = EventUtil.getTarget(evt);    if(/[^\d]/.test(target.value)){      target.style.backgroundColor = 'red';      // 文字框變成紅色;    }else{      target.style.backgroundColor = '';    }  });

二 文字框指令碼
// 在HTML中,有兩種方式來表現文字框:

// 一種是單行文字框<input type="text">;

// 一種是多行文字框<textarea>;

1.擷取value值

// 雖然<input>在字面上有value值,而<textarea>卻沒有,但可以通過value擷取它們的值;
    var textField = fm.elements[0];
    var areaField = fm.elements[1];
    alert(textField.value+','+areaField.value);           // 得到<input>和<textarea>的value值;
    // PS:使用表單的value是最推薦的,它是HTMLDOM中的屬性,不建議使用標準的DOM的方法getAttribute();
    // 原因是:對value屬性的修改,不一定反映在DOM中;

// defaultValue:得到原本的value值;不會因為值的改變而變化;
    alert(textField.defaultValue);                        // 得到最初設定的value值;

2.選擇文本

// 使用select()方法,可以將文字框裡的內容選中,並將焦點設定到文字框中;  textField.select();                   // 在文字框獲得焦點時選擇其所有文本;// 選取部分文本// 在使用文字框內容的時候,我們有時要直接選定部分文本,這個行為還沒有標準;// Firefox的解決方案是:setSelectionRange()方法;它接受兩個參數:索引和長度;  textField.setSelectionRange(0,1);            // 選擇第一個字元;  textField.setSelectionRange(0,textField.value.length);  // 選擇全部;   // IE8以下不支援這種寫法,可以使用IE的範圍操作代替;  var range = textField.createTextRange();         // 建立一個文本範圍對象;  range.collapse(true);                  // 將指標移動到起點;  range.moveStart('character',0);             // 移動指標,character表示逐字移動;  range.moveEnd('character',1);              // 移動終點;  range.select();                     // 焦點選定;// 選擇部分文本相容函數  function selectText(text,start,stop){    if(text.setSelectionRange){      text.setSelectionRange(start,stop);      text.focus();    }else if(text.createTextRange){      var range = text.createTextRange();      range.collapse(true);      range.moveStart('character',start);      range.moveEnd('character',sotp-start);      range.select();    }  }// 與select()方法對應的,是一個select事件,可以選中文字框文本後觸發;  addEvent(textField,'select',function(){    alert(this.value);                // IE事件需要傳遞this才可以這麼寫;  });

// 獲得選擇的文本// Firefox提供了兩個屬性:selectionStart和selectionEnd;  addEvent(textField,'select',function(){    alert(this.value.substring(this.selectionStart,this.selectionEnd));  });  // IE8以下,提供了另一個方案:selection對象,屬於document;  // 這個對象儲存著使用者在整個文檔範圍內選擇的文本資訊;  // 相容函數  function getSelecText(text){    if(typeof text.selectioinStart =='number'){     // 非IE;      return text.value.substring(text.selectionStart,text.selectionEnd);    }else if(document.selection){            // IE;      return document.selection.createRange().text;  // 擷取IE選擇的文本;    }  }  // PS:存在問題:IE在觸發select事件的時候,在選擇一個字元後立即觸發,而其他瀏覽器是選擇想要的字元後釋放滑鼠鍵時再觸發;  // 所以使用alert()的話,導致跨瀏覽器的不相容;  // 所以我們可以通過將得到的選擇文本賦值給別的對象;  addEvent(textField,'select',function(){    // alert(getSelecText(this));            // 導致使用者行為結果不一致;     document.getElementById('box').innerHTML = getSelecText(this);  })

3.過濾輸入

// 為了使文字框輸入指定的字元,我們必須對輸入進文字框的字元進行驗證;  addEvent(areaField,'keypress',function(evt){    var e = evt || window.event;    var charCode = getCharCode(evt);      // 得到字元編碼;    if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){      preDef(evt);              // 條件阻止預設;    }  });  // PS:前半段條件判斷只有數字才可以輸入,導致常規按鍵,比如游標鍵/退格鍵/刪除鍵等無法使用;  // 部分瀏覽器比如Firefox,需要解放這些鍵,而非字元觸發的編碼均為0;  // 在Safari3之前的瀏覽器,也會被阻止,而它對應的字元編碼全部為8,所以最後加上charCode>9的判斷;  // 確保使用者沒有按下ctrl鍵;

// 阻止文字框裁剪/複製和粘貼;事件名        說明copy     在發生複製操作時觸發;cut      在發生裁剪操作時觸發;paste     在發生粘貼操作時觸發;beforecopy  在發生複製操作時觸發;beforecut   在發生裁剪操作時觸發;beforepaste  在發生粘貼操作時觸發;// 如果我們想要禁用裁剪/複製/粘貼,那麼可以阻止預設行為即可;  addEvent(areaField,'cut',function(evt){    preDef(evt);  });  addEvent(areaField,'copy',function(evt){    preDef(evt);  });  addEvent(areaField,'paste',function(evt){    preDef(evt);  });// 最後一個影響輸入的因素,就是:IME;// 中文IME,它的原理是在IME面板上先儲存文本,按下斷行符號就寫入英文文本,按下空格就寫入中文文本;// 解決方案:通過CSS來禁止調出IME;  style='ime-mode:disabled';          // CSS直接編寫;  areaField.style.imeMode='disabled';      // 在JS中設定;  // PS:Chrome無法禁止IME調出,所以,最後使用正則驗證已輸入的文本;  addEvent(areaField,'keyup',function(evt){    this.value = this.value.replace(/[^\d]/g,'');  // 把非數字都替換成空;  });

4.自動切換焦點

// 為了增加表單欄位的易用性,很多欄位在滿足一定條件時(比如長度),就會自動切換到下一個欄位上繼續填寫;  <input type='text' name='user1' maxlength='1'/>    // 只能寫1個;  <input type='text' name='user2' maxlength='2'/>     <input type='text' name='user3' maxlength='3'/>  function tabForward(evt){    var e = evt || window.event;    var target = getTarget(evt);    // 判斷當前長度是否和指定長度一致;    if(target.value.length == target.maxLength){      // 遍曆所有欄位;      for(var i=0; i<fm.elements.length; i++){        // 找到當前欄位;        if(fm.elements[i]==target){          // 就把焦點移入下一個欄位;          if(fm.elements[i+1]){            fm.elements[i+1].focus();          }          // 中途返回;          return;        }      }    }  }

三 選擇框指令碼

選擇框是通過<select>和<option>元素建立的;

HTMLSelectElement對象

屬性/方法                 說明
add(new,rel)        插入新元素,並指定位置;
multiple            布爾值,是否允許多項選擇;
options             <option>元素的HTMLCollection集合;
remove(index)       移除給定位置的選項;
selectedIndex       基於0的選中項的索引,如果沒有選中項,則值為-1;
size                選擇框中可見的行數;

// 在DOM中,每個<option>元素都有一個HTMLOptionElement對象,以便訪問資料;
HTMLOptionElement對象
屬性 說明
index 當前選項在options集合中的索引;
label 當前選項的標籤;
selected 布爾值,表示當前選項是否被選中;
text 選項的文本;
value 選項的值;

var city = fm.elements['city'];      // HTMLSelectElement;  alert(city.options);            // HTMLOptionsCollection;  alert(city.options[0]);          // HTMLOptionElement;  alert(city.type);             // select-one;  // PS:選擇框裡的type屬性有可能是:select-one,也有可能是:select-multiple;  // 這取決於HTML代碼中有沒有multiple屬性;  alert(city.options[0].text);       // 上海text,擷取text值;  alert(city.options[0].value);      // 上海value,擷取value值;  // PS:操作select時,最好使用HTMLDOM,以為瀏覽器安全色性比較好;  // 如果使用標準DOM,會因為不同的瀏覽器導致不同的結果;  // PS:當選項沒有value值的時候,IE會返回Null 字元串,其他瀏覽器會返回text值;

2.選擇選項

對於只能選擇一項的選擇框,使用selectedIndex屬性最為簡單;
複製代碼 代碼如下:
    addEvent(city,'change',function(){
        alert(this.selectedIndex);                        // 得到當前選項的索引,從0開始;
        alert(this.options[this.selectedIndex].text);     // 得到當前選項的text值;
        alert(this.options[this.selectedIndex].value);    // 得到當前選項的value值;
    });
    city.selectedIndex = 1;                               // 設定selectedIndex可以定位某個索引;

通過option的屬性selected(布爾值),也可以設定定位某個索引,設定為true即可;
    city.options[0].selected = true;                      // 設定第一個索引;

selected和selectedIndex區別:
1.selected是返回的布爾值;所以一般用於判斷上;
2.selectedIndex返回的是數值,一般用於設定和擷取;

複製代碼 代碼如下:
    addEvent(city,'change',function(){
        if(this.options[2].selected == true){             // 判斷第三個選項是否被選定;
            alert('正確!');
        }
    });

3.添加選項
// 如需要動態添加選項,我們提供兩種方案:DOM和Option建構函式;
(1).DOM
var option = document.createElement('option');
option.appendChild(document.createTextNode('北京 text'));
option.setAttribute('value','北京 value');
city.appendChild(option);

(2).Option建構函式
var option = new Option('北京 text','北京 value');
city.appendChild(option); // IE出現bug;

(3).使用add()方法來添加選項:
var option = new Option('北京 text','北京 value');
city.add(option,0); // 0,表示添加到第一位;
// PS:在DOM規定,add()中兩個參數是必須的,如果不正確索引,那麼第二個參數設定null即可,即預設移入最後一個選項;
// 但在IE中第二個參數是可選的,所以設定null表示放入不存在的位置,導致失蹤;
// 為了相容性,可以傳遞undefined即可相容;
city.add(option,null); // IE不顯示了;
city.add(option,undefined); // 相容;

 4.移除選項

// 有三種方式可以移除某一個選項:DOM移除/remove()方法移除和null移除;city.removeChild(city.option[0]); // DOM移除;city.remove(0); // remove()移除,推薦;city.options[0] = null; // null移除;// PS:當第一項移除後,下面的項,往上移,所以不停的移除第一項,即可全部移除;

5.移動選項

// 如果有兩個選擇框,把第一個選擇框裡的第一個選項移到第二個選擇框裡,並且第一個選擇框裡的第一項被移除;var city = fm.elements['city']; // 第一個選擇框;var info = fm.elements['info']; // 第二個選擇框;info.appendChild(city.options[0]); // 移動,並在第一個選擇框中刪除;

 6.排列選項

選擇框提供了一個index屬性,可以得到當前選項的索引值,和selectedIndex的區別是,一個是選擇框對象的調用,一個是選項對象的調用;

複製代碼 代碼如下:
     var option1 = city.options[1];
     city.insertBefore(option1,city.options[option1.index-1]);    // 往上移位;

7.選項按鈕

// 通過checked屬性來擷取選項按鈕的值;  for(var i=0; i<fm.sex.length; i++){          // 迴圈選項按鈕;     if(fm.sex[i].checked == true){           // 遍曆每一個,找出處於選中狀態的那一個;      alert(fm.sex[i].value);            // 得到值;    }  }  // PS:除了checked屬性之外,選項按鈕還有一個defaultChecked按鈕,  // 它擷取的是原本的checked按鈕對象,而不會因為checked的改變而改變;  if(fm.sex[i].defaultChecked == true){    alert(fm.sex[i].value);  }

8.複選按鈕

// 通過checked屬性來擷取複選按鈕的值,  var love = '';  for(var i=0; i<fm.love.length; i++){    if(fm.love[i].checked == true){      love += fm.love[i].value;    }  }  alert(love);