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

Tony 發(fā)布于2019-08-23 12:04 / 1507人閱讀

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

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

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

action，接受請(qǐng)求的URL，等價(jià)于HTML中的action特性

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

enctype，請(qǐng)求的編碼類型，等價(jià)于HTML中的enctype特性

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

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

name，表單的名稱，等價(jià)于HTML的name特性

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

submit()，提交表單

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

提交表單

用戶單擊提交按鈕或者圖像按鈕時(shí)，就會(huì)提交表單，使用或

阻止表單提交代碼

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

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

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

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

重置表單

在用戶單擊重置按鈕時(shí)，表單會(huì)被重置，使用type特性值為reset的或

阻止重置表單的代碼

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

可以通過(guò)JavaScript來(lái)重置表單

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

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

表單字段

表單字段公有的屬性

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

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

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

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

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

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

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

公有的表單字段方法

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

公有的表單字段事件

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

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

focus，當(dāng)前字段獲得焦點(diǎn)時(shí)觸發(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 = "";
  }
})

文本框腳本

兩種方式來(lái)表示文本框，input和textarea

選擇文本

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

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

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

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

過(guò)濾輸入

剪切板事件

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

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

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

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

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

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

自動(dòng)切換焦點(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屬性，這個(gè)屬性的值是一個(gè)正則表達(dá)式，用于匹配文本框中的值

檢測(cè)有效性

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

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

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

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

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

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

stepMisMatch，如果max和min之間的步長(zhǎng)值不合適，返回true

tooLong，如果值的長(zhǎng)度超過(guò)了maxlength屬性指定的長(zhǎng)度，返回true

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

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

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

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

選擇框腳本

HTMLSelectElement類型提供的屬性和方法

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

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

options，控件中所有

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

selectedIndex，基于 0 的選中項(xiàng)的索引，如果沒(méi)有選中項(xiàng)，則值為-1。對(duì)于支持多選的控件，只保存選中項(xiàng)中第一項(xiàng)的索引。

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

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

如果沒(méi)有選中的項(xiàng)，則選擇框的 value 屬性保存空字符串。

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

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

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

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

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

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

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

text，選項(xiàng)的文本

value，選項(xiàng)的值，等價(jià)于HTML中的value特性

選擇選項(xiàng)

對(duì)于只允許選擇一項(xiàng)的選擇框，訪問(wèn)選中項(xiàng)的最簡(jiǎn)單方式就是使用選擇框的selectedIndex屬性

var selectedOption=selectbox.opitons[selectbox,selectedIndex]

添加選項(xiàng)

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

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

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

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

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

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

移除選項(xiàng)

removeChild()方法，移除選項(xiàng)

selectbox.removeChild(selectbox.options[0]);//移除第一個(gè)選項(xiàng)

remove()方法，移除選項(xiàng)

selectbox.remove(0);//移除第一個(gè)選項(xiàng)

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

selectbox.options[0]=null;//移除第一個(gè)選項(xiàng)

表單序列化

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

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

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

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

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

多選選擇框中的每個(gè)選中的值多帶帶一個(gè)條目

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！