亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

高程3總結(jié)#第14章表單腳本

Tony / 1605人閱讀

表單腳本 表單的基礎(chǔ)知識

HTMLFormElement有自己獨(dú)特的屬性和方法

acceptCharset，服務(wù)器能夠處理的字符集，等價于HTML中的accept-charset特性

action，接受請求的URL，等價于HTML中的action特性

elements，表單中所有控件的集合

enctype，請求的編碼類型，等價于HTML中的enctype特性

length，表單中控件的數(shù)量

method，要發(fā)送的HTTP請求類型，通常是"get"或"post"，等價于HTML的method特性

name，表單的名稱，等價于HTML的name特性

reset()，將所有表單域重置為默認(rèn)值

submit()，提交表單

target()，用于發(fā)送請求和接收響應(yīng)的窗口名稱，等級與HTML的target特性

提交表單

用戶單擊提交按鈕或者圖像按鈕時，就會提交表單，使用或

阻止表單提交代碼

var form=document.getElelemtById("myForm");
EventUtil.addHandler(form,"submit",function(event){
  //取得事件對象
  event=EventUtil.getEvent(event);
  //阻止默認(rèn)事件
  EventUtil.preventDefault(event);
})

以編程方式提交表單，不會觸發(fā)submit事件，因此調(diào)用方法之前要先驗(yàn)證表單數(shù)據(jù)

var form=document.getElementById("muForm");
//提交表單
form.submit();

提交表單時，可能出現(xiàn)最大的問題就是重復(fù)提交表單，在第一次提交表單之后，如果長時間沒有反應(yīng)，用戶可能會反復(fù)單擊提交按鈕。解決辦法兩個，第一次提交之后就禁用提交按鈕，或者利用onsubmit事件處理程序取消后續(xù)的表單提交操作

重置表單

在用戶單擊重置按鈕時，表單會被重置，使用type特性值為reset的或

阻止重置表單的代碼

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
  //取得事件對象
  event = EventUtil.getEvent(event);
  //阻止表單重置
  EventUtil.preventDefault(event);
});

可以通過JavaScript來重置表單

var form=document.getElementById("myForm");
//重置表單
form.reset();

與調(diào)用submit()方法不同，調(diào)用submit方法會像單擊按鈕一樣觸發(fā)reset事件

表單字段

表單字段公有的屬性

disabled，布爾值，表示當(dāng)前字段是否被禁用

form，指向當(dāng)前字段所屬表單的指針。只讀

name，當(dāng)前字段的名稱

readOnly，布爾值，表示當(dāng)前字段是否只讀

tabIndex，表示當(dāng)前字段的切換序號

type，當(dāng)前字段類型，如CheckBox

value當(dāng)前字段將被提交給服務(wù)器的值

公有的表單字段方法

每個表單都有兩個方法，focus()和blur()，其中focus()方法用于將瀏覽器的焦點(diǎn)設(shè)置到表單字段，即激活字段，使其可以響應(yīng)鍵盤事件。在調(diào)用blur方法時，并不會把焦點(diǎn)轉(zhuǎn)移到某個特定的元素上，僅僅是將焦點(diǎn)從調(diào)用這個方法的元素上移走

公有的表單字段事件

blur，當(dāng)前字段失去焦點(diǎn)時觸發(fā)

change，對于input和textarea元素，在失去焦點(diǎn)且value值改變時觸發(fā)，對于select元素，在選擇選項時觸發(fā)

focus，當(dāng)前字段獲得焦點(diǎn)時觸發(fā)

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (target.style.backgroundColor != "red"){
    target.style.backgroundColor = "yellow";
  }
});
EventUtil.addHandler(textbox, "blur", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (/[^d]/.test(target.value)){
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
});
EventUtil.addHandler(textbox, "change", function(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (/[^d]/.test(target.value)){
    target.style.backgroundColor = "red";
  } else {
    target.style.backgroundColor = "";
  }
})

文本框腳本

兩種方式來表示文本框，input和textarea

選擇文本

兩種文本框都支持select()方法，與select()方法對應(yīng)的是一個select事件，選擇文本框中的文本時，就會觸發(fā)select事件

添加兩個屬性：selectionStart和selectionEnd，保存的是基于0的數(shù)值，表示選擇文本的范圍

所有文本框都有一個setSelectionRange()方法，接收兩個參數(shù)：要選擇的第一個字符的索引和要選擇的最后一個字符之后的字符的索引

textbox.value = "Hello world!"
//選擇所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前 3 個字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第 4 到第 6 個字符
textbox.setSelectionRange(4, 7); //"o w"

過濾輸入

剪切板事件

beforecopy，在發(fā)生復(fù)制操作前觸發(fā)

copy，在發(fā)生復(fù)制操作時觸發(fā)

beforecut，在發(fā)生剪切操作前觸發(fā)

cut，在發(fā)生剪切操作時觸發(fā)

beforepaste，在發(fā)生粘貼操作前觸發(fā)

paste，在發(fā)生粘貼操作時觸發(fā)

自動切換焦點(diǎn) 
(function(){
function tabForward(event){
  event = EventUtil.getEvent(event);
  var target = EventUtil.getTarget(event);
  if (target.value.length == target.maxLength){
    var form = target.form;
    for (var i=0, len=form.elements.length; i < len; i++) {
      if (form.elements[i] == target) {
        if (form.elements[i+1]){
          form.elements[i+1].focus();
        }
        return;
      }
    }
  }
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();
HTML5約束驗(yàn)證API

必填字段

指定required屬性

其他輸入類型

新增email和url等類型

數(shù)值范圍

number，range，datetime，datetime-local，date，mouth，week，time等

輸入模式

pattern屬性，這個屬性的值是一個正則表達(dá)式，用于匹配文本框中的值

檢測有效性

checkValidty()方法，檢測表單匯總某個字段是否有效，所有表單字段都有這個方法，如果字段有效，返回true，反之返回false

if (document.forms[0].elements[0].checkValidity()){
//字段有效，繼續(xù)
} else {
//字段無效
}

customError，如果設(shè)置了setCustomValidity，則為true，否則為false

patternMismatch，如果值與指定的pattern屬性不匹配，返回true

rangeOverflow，如果值比max值大，返回true

rangeUnderflow，如果值比min值小，返回true

stepMisMatch，如果max和min之間的步長值不合適，返回true

tooLong，如果值的長度超過了maxlength屬性指定的長度，返回true

typeMismatch，如果值不是mail或url返回的格式，返回true

valid，如果這里的屬性都是false，返回true

valueMissing，如果標(biāo)注為required的字段中滅有值，返回true

通過設(shè)置novalidate屬性，可以告訴表單不進(jìn)行驗(yàn)證

選擇框腳本

HTMLSelectElement類型提供的屬性和方法

add(newOption, relOption)，向控件中插入新

multiple，布爾值，表示是否允許多項選擇；等價于 HTML 中的 multiple 特性。

options，控件中所有

remove(index)，移除給定位置的選項。

selectedIndex，基于 0 的選中項的索引，如果沒有選中項，則值為-1。對于支持多選的控件，只保存選中項中第一項的索引。

size，選擇框中可見的行數(shù)；等價于 HTML 中的 size 特性

選擇框的value屬性由當(dāng)前選中項決定，相應(yīng)規(guī)則

如果沒有選中的項，則選擇框的 value 屬性保存空字符串。

如果有一個選中項，而且該項的 value 特性已經(jīng)在 HTML 中指定，則選擇框的 value 屬性等于選中項的 value 特性。即使 value 特性的值是空字符串，也同樣遵循此條規(guī)則。

如果有一個選中項，但該項的 value 特性在 HTML 中未指定，則選擇框的 value 屬性等于該項的文本。

如果有多個選中項，則選擇框的 value 屬性將依據(jù)前兩條規(guī)則取得第一個選中項的值。

為了便于訪問數(shù)據(jù)，HTMLOptionElement對象添加下列屬性

index，當(dāng)前選項在option集合中的索引

label，當(dāng)前選項的標(biāo)簽，等價于HTML中的label特性

selected，布爾值，表示當(dāng)前選項是否被選中，將這個屬性設(shè)置為true可以選中當(dāng)前選項

text，選項的文本

value，選項的值，等價于HTML中的value特性

選擇選項

對于只允許選擇一項的選擇框，訪問選中項的最簡單方式就是使用選擇框的selectedIndex屬性

var selectedOption=selectbox.opitons[selectbox,selectedIndex]

添加選項

添加選項的方式有很多，第一種方式就是使用如下所示的DOM方法

var newOption=document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);

第二種方式是使用Option構(gòu)造函數(shù)來創(chuàng)建新選項

var newOption=new Option("Option text","Option value");
selectbox.appendChild(newOption);//在IE8及之前版本中有問題

第三種添加新選項的方式是使用選擇框的add()方法

var newOption=new Option("Option text","Option value");
selectbox.add(newOption,undefined);//最佳方案

移除選項

removeChild()方法，移除選項

selectbox.removeChild(selectbox.options[0]);//移除第一個選項

remove()方法，移除選項

selectbox.remove(0);//移除第一個選項

將相應(yīng)的選項設(shè)置為null，移除選項

selectbox.options[0]=null;//移除第一個選項

表單序列化

瀏覽器將數(shù)據(jù)發(fā)送給服務(wù)器

對表單字段的名稱和值進(jìn)行URL編碼，使用&符分隔

不發(fā)送禁用的表單字段

只發(fā)送勾選的復(fù)選框和單選按鈕

不發(fā)送type為"reset"和"button"的按鈕

多選選擇框中的每個選中的值多帶帶一個條目

在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕，否則不發(fā)送提交按鈕，也包括type為"image"的元素