jQuery 獲取和設(shè)置HTML元素

Query 中包含更改和操作 HTML 元素和屬性的強(qiáng)大方法。我們可以通過(guò)這些方法來(lái)獲取 HTML 元素中的文本內(nèi)容、元素內(nèi)容（例如HTML標(biāo)簽）、屬性值等。

text()方法

text() 方法可以用于設(shè)置或獲取所選元素的文本內(nèi)容。

示例：

例如我們獲取下列 <p> 標(biāo)簽中的文本內(nèi)容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').text();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來(lái)到俠課島!</p>
  <div>
    <p>希望俠課島中有適合你的編程課程。</p>
  </div>
</body>
</html>

在瀏覽器中演示效果：

除了獲取文本內(nèi)容，text() 還可以用于設(shè)置文本內(nèi)容，我們可以來(lái)看一下。

示例：

例如通過(guò) text() 將 .content 的文本內(nèi)容設(shè)置為 hello, xkd!：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('.content').text("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <p class="content">你好，歡迎來(lái)到俠課島!</p>
  <p><button>點(diǎn)擊按鈕</button></p>
</body>
</html>

在瀏覽器中演示效果：

html()方法

html() 方法用于設(shè)置或返回所選元素的內(nèi)容（包括HTML標(biāo)記）。

示例：

通過(guò) html() 方法獲取 p 元素的內(nèi)容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    var content = $('.hello').html();
    alert(content);
  });
</script>
</head>
<body>
  <p class="hello">你好，歡迎來(lái)到俠課島!</p>
</body>
</html>

在瀏覽器中演示效果：

除此之外，我們還可以使用 html() 方法來(lái)設(shè)置指定元素的內(nèi)容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('.hello').html('你好，歡迎來(lái)到俠課島!');
  });
</script>
</head>
<body>
  <p>向下面的p標(biāo)簽中添加文本內(nèi)容：</p>
  <p class="hello"></p>
</body>
</html>

在瀏覽器中演示效果：

val()方法

val() 用于設(shè)置或返回表單字段的值。該方法大多時(shí)候用于 input 元素。

示例：

例如獲取輸入框 input 中的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert($('input').val());
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="summer" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

如果要使用 val() 方法設(shè)置 value 的值，我們可以像下面這樣做：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $('input').val('summer')
    });
  });
</script>
</head>
<body>
  文本輸入框：<input type="text" name="name" value="" />
  <p>
    <button>獲取輸入框的值</button>
  </p>
</body>
</html>

在瀏覽器中演示效果：

attr()方法

attr() 方法用于設(shè)置或返回被選元素的屬性值。

示例：

例如下面這個(gè)例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    alert($('div').attr("class"));
  });
</script>
</head>
<body>
  <div class="xkd">獲取class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

attr() 方法除了獲取元素的屬性值，還可以設(shè)置元素的屬性值，我們來(lái)看一下。

示例：

將下面 <div> 標(biāo)簽中的 class 屬性的值設(shè)置為 summer：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $('div').attr("class", "summer")
  });
</script>
</head>
<body>
  <div>設(shè)置class屬性的值</div>
</body>
</html>

在瀏覽器中演示效果：

鏈接：https://www.9xkd.com/

TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨(dú)有的屬性和方法：

name：表示 <input> 元素的名稱。
disabled：表示 <input> 元素是否禁止使用。在表單提交時(shí)不會(huì)包含被禁止的 <input> 元素。
autofocus：表示頁(yè)面加載時(shí)，該元素是否會(huì)自動(dòng)獲得焦點(diǎn)。
required：表示表單提交時(shí)，該 <input>元素是否為必填。
value：表示該 <input> 元素的值。
validity：返回一個(gè) ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。是只讀屬性。
validationMessage：表示 <input> 元素校驗(yàn)失敗時(shí)，用戶看到的報(bào)錯(cuò)信息。如果該元素不需要校驗(yàn)，或者通過(guò)校驗(yàn)，該屬性為空字符串。是只讀屬性。
willValidate：表示表單提交時(shí)，<input> 元素是否會(huì)被校驗(yàn)。是只讀屬性。
select()：選中 <input> 元素內(nèi)部的所有文本。
click()：模擬鼠標(biāo)點(diǎn)擊當(dāng)前的 <input> 元素。

而在上述介紹 HTMLInputElement 類型中的屬性時(shí)，type 屬性要特別關(guān)注一下，因?yàn)楦鶕?jù) type 屬性的改變，可以改變<input>的屬性。

類型	描述
text	文本輸入
password	密碼輸入
submit	表單數(shù)據(jù)提交
button	按鈕
radio	單選框
checkbox	復(fù)選框
file	文件
hidden	隱藏的字段
image	定義圖像作為提交按鈕
reset	重置按鈕

省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。

當(dāng) type 的值為text/password/number/時(shí)，會(huì)有以下屬性對(duì) <input> 元素有效。

屬性	類型	描述
autocomplete	string	字符串on或off，表示<input>元素的輸入內(nèi)容可以被瀏覽器自動(dòng)補(bǔ)全。
maxLength	long	指定<input>元素允許的最多字符數(shù)。
size	unsigned long	表示<input>元素的寬度，這個(gè)寬度是以字符數(shù)來(lái)計(jì)量的。
pattern	string	表示<input>元素的值應(yīng)該滿足的正則表達(dá)式
placeholder	string	表示<input>元素的占位符，作為對(duì)元素的提示。
readOnly	boolean	表示用戶是否可以修改<input>的值。
min	string	表示<input>元素的最小數(shù)值或日期。
max	string	表示<input>元素的最大數(shù)值或日期。
selectionStart	unsigned long	表示選中文本的起始位置。如果沒有選中文本，返回光標(biāo)在<input>元素內(nèi)部的位置。
selectionEnd	unsigned long	表示選中文本的結(jié)束位置。如果沒有選中文本，返回光標(biāo)在<input>元素內(nèi)部的位置。
selectionDirection	string	表示選中文本的方向。可能的值包括forward、backward、none。

下面創(chuàng)建一個(gè) type="text" ，一次顯示 25 個(gè)字符，但最多允許顯示 50 個(gè)字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中對(duì)應(yīng)的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨(dú)有的屬性和方法：

form：只讀屬性，返回對(duì)父表單元素的引用。如果此元素未包含在表單元素中，則它可以是同一文檔中 id 屬性同 form 值的 <form> 元素，如果沒有，該值為 null。
type：只讀屬性，返回字符串textarea。
value：string類型，返回/設(shè)置控件中包含的原始值。
textLength：只讀屬性，long類型，返回<textarea>元素的value值的長(zhǎng)度。與 value.length 相同。
defaultValue：string類型，返回/設(shè)置textarea元素的默認(rèn)值。
placeholder：string類型，返回/設(shè)置 textarea 元素的占位符，作為對(duì)輸入內(nèi)容的提示。
rows：unsigned long類型，返回/設(shè)置textarea元素的可見文本行數(shù)。
cols：unsigned long類型，返回/設(shè)置 textarea 元素的可見寬度。
autofocus：boolean類型，返回/設(shè)置textarea元素在頁(yè)面加載時(shí)自動(dòng)獲取焦點(diǎn)。
name：返回/設(shè)置 textarea 元素的名稱。
disabled：boolean類型，返回/設(shè)置 textarea 元素是否應(yīng)當(dāng)被禁用。
HTMLTextAreaElement.labels：NodeList類型，返回與此select元素關(guān)聯(lián)的標(biāo)簽元素列表。
maxLength：long類型，返回/設(shè)置元素可以輸入的最大字符數(shù)。僅在值更改時(shí)才評(píng)估此約束。
minLength：long類型，返回/設(shè)置元素可以輸入的最小字符數(shù)。僅在值更改時(shí)才評(píng)估此約束。
accessKey：boolean類型，返回/設(shè)置訪問(wèn) textarea 的鍵盤快捷鍵。
readOnly：boolean類型，返回/設(shè)置 textarea 元素是否為只讀。
required：boolean 類型，返回/設(shè)置 textarea 元素是否為必填項(xiàng)。
tabIndex：long類型，返回/設(shè)置 textarea 元素的 tab 鍵導(dǎo)航順序中元素的位置。

下面創(chuàng)建一個(gè)高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：

<textarea rows="25" cols="5">initial value</textarea>

注意：處理文本框值的時(shí)候最好不要使用 DOM 方法，而應(yīng)該使用 value 屬性。

選擇文本

<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內(nèi)容。該方法的語(yǔ)法為：

select(): void

下面看一個(gè)示例：

let textbox = document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框獲得焦點(diǎn)時(shí)，選中文本框的內(nèi)容：

textbox.addEventListener("focus", (event) => {
    event.target.select();
});

select 事件

當(dāng)選中文本框中的文本或使用 select() 方法時(shí)，會(huì)觸發(fā) select 事件。

let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
    console.log(`Text selected: ${textbox.value}`);
});

取得選中的文本

HTML5 對(duì) select 事件進(jìn)行了擴(kuò)展，通過(guò) selectionStart 和 selectionEnd 屬性獲取文本選區(qū)的起點(diǎn)偏移量和終點(diǎn)偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持這兩個(gè)屬性。

選中部分文本

HTML5 提供了 setSelectionRange() 方法用于選中部分文本：

setSelectionRange(start, end, direction): void;

start：被選中的第一個(gè)字符的位置索引，從 0 開始。如果這個(gè)值比元素的 value 長(zhǎng)度還大，則會(huì)被看做 value 最后一個(gè)位置的索引。
end：被選中的最后一個(gè)字符的下一個(gè)位置索引。如果這個(gè)值比元素的 value 長(zhǎng)度還大，則會(huì)被看做 value 最后一個(gè)位置的索引。
direction：該參數(shù)是可選的字符串類型，表示選擇方向，可以傳入 “forward”/“backward”/“none” 三個(gè)值。

下面看一個(gè)例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
    function selectText() {
        let input = document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到選中效果，必須讓文本框獲得焦點(diǎn)。

輸入過(guò)濾

不同文本框經(jīng)常需要保證輸入特定類型或格式的數(shù)據(jù)，或許數(shù)據(jù)需要包含特定字符或必須匹配某個(gè)特定模式。而文本框并未提供驗(yàn)證功能，因此要配合 JavaScript 腳本實(shí)現(xiàn)輸入過(guò)濾功能。

屏蔽字符

有些輸入框需要出現(xiàn)或不出現(xiàn)特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：

input.addEventListener("keypress", (event) => {
    event.preventDefault();
});

而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達(dá)式實(shí)現(xiàn)只允許輸入數(shù)字的輸入框：

input.addEventListener("keypress", (event) => {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

還有一個(gè)問(wèn)題需要處理：復(fù)制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會(huì)屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項(xiàng)檢測(cè)是確保沒有按下Ctrl鍵，如下面的例子所示：

textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后這個(gè)改動(dòng)可以確保所有默認(rèn)的文本框行為不受影響。這個(gè)技術(shù)可以用來(lái)自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個(gè)實(shí)現(xiàn)了剪切板相關(guān)的事件以及通過(guò)JavaScript訪問(wèn)剪切板數(shù)據(jù)的瀏覽器，其它瀏覽器在后來(lái)也都支持了相同的事件和剪切板的訪問(wèn)，后來(lái) HTML5 將其納入了規(guī)范。以下是與剪切板相關(guān)的 6 個(gè)事件：

beforecopy：發(fā)生復(fù)制操作前觸發(fā)。
copy：發(fā)生復(fù)制操作時(shí)觸發(fā)。
beforecut：發(fā)生剪切操作前觸發(fā)。
cut：發(fā)生剪切操作時(shí)觸發(fā)。
beforepaste：發(fā)生粘貼操作前觸發(fā)。
paste：發(fā)生粘貼操作時(shí)觸發(fā)。

剪切板事件的行為及相關(guān)對(duì)象會(huì)因?yàn)g覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會(huì)在顯示文本框的上下文菜單時(shí)觸發(fā)，但 IE 不僅在這種情況下觸發(fā)，也會(huì)在 copy、cut 和 paste 事件在所有瀏覽器中都會(huì)按預(yù)期觸發(fā)。

在實(shí)際的事件發(fā)生之前，通過(guò)beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發(fā)送或從中檢索數(shù)據(jù)前修改數(shù)據(jù)。不過(guò)，取消這些事件并不會(huì)取消剪貼板操作。要阻止實(shí)際的剪貼板操作，必須取消 copy、cut和 paste 事件。

剪貼板的數(shù)據(jù)通過(guò) clipboardData 對(duì)象來(lái)獲取，且clipboardData 對(duì)象提供 3 個(gè)操作數(shù)據(jù)的方法：

getData(format)：從剪貼板獲取指定格式的數(shù)據(jù)，接收的參數(shù)為指定獲取的數(shù)據(jù)格式，如果沒有指定數(shù)據(jù)格式或指定數(shù)據(jù)格式不存在，則此方法返回一個(gè)空字符串。
setData(format, data)：給剪貼板賦予指定格式的數(shù)據(jù)，第一個(gè)參數(shù)指定數(shù)據(jù)格式，第二個(gè)參數(shù)為第一個(gè)參數(shù)賦予數(shù)據(jù)。如果指定數(shù)據(jù)格式不存在，則將其添加到數(shù)據(jù)存儲(chǔ)的末尾；如果指定數(shù)據(jù)格式存在，則將數(shù)據(jù)替換在指定數(shù)據(jù)格式的位置。
clearData(format)：刪除指定格式的數(shù)據(jù)，接收的參數(shù)為指定要?jiǎng)h除的數(shù)據(jù)格式，如果指定格式不存在，則此方法不執(zhí)行任何操作；如果此參數(shù)為空字符串或未提供，則將刪除所有格式的數(shù)據(jù)。

而 clipboardData 對(duì)象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經(jīng)授權(quán)訪問(wèn)剪貼板，只能在剪貼板事件期間訪問(wèn) clipboardData 對(duì)象；IE 會(huì)在任何時(shí)候都暴露 clipboardData 對(duì)象。因此，要兼容兩者，最好在剪貼板事件期間使用該對(duì)象。

function getClipboardText(event){
    var clipboardData = (event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有數(shù)字，那剪貼時(shí)，就需要使用paste事件檢查剪貼板上的文本是否無(wú)效。如果無(wú)效，可以取消默認(rèn)行為：

input.addEventListener("paste", (event) => {
    let text = getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問(wèn)getData()方法。

自動(dòng)切換

在 JavaScript 中，可以用在當(dāng)前字段完成時(shí)自動(dòng)切換到下一個(gè)字段的方式來(lái)增強(qiáng)表單字段的易用性。比如，常用手機(jī)號(hào)分為國(guó)家好加手機(jī)號(hào)。因此，我們?cè)O(shè)置 2 個(gè)文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

當(dāng)文本框輸入到最大允許字符數(shù)后，就把焦點(diǎn)移到下一個(gè)文本框，這樣可以增加表單的易用性并加速數(shù)據(jù)輸入。如下所示：

<script>
    function tabForward(event){
        let target = event.target;
        if (target.value.length == target.maxLength){
            let form = target.form;
            for (let 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;
                }
            }
        }
    }
    let inputIds = ["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox = document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

這里，tabForward() 函數(shù)通過(guò)比較用戶輸入文本的長(zhǎng)度與 maxLength 屬性的值來(lái)檢測(cè)輸入是否達(dá)到了最大長(zhǎng)度。如果兩者相等，就通過(guò)循環(huán)表中的元素集合找到當(dāng)前文本框，并把焦點(diǎn)設(shè)置到下一個(gè)元素。

注意：上面的代碼只適用于之前既定的標(biāo)記，沒有考慮可能存在的隱藏字段。

HTML5

HTML5 新增了一些表單提交前，瀏覽器會(huì)基于指定的規(guī)則進(jìn)行驗(yàn)證，并在出錯(cuò)時(shí)顯示適當(dāng)?shù)腻e(cuò)誤信息。而驗(yàn)證會(huì)基于某些條件應(yīng)用到表單字段中。

必填字段

表單字段中添加 required 屬性，用于標(biāo)注該字段是必填項(xiàng)，不填則無(wú)法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通過(guò) JavaScript 檢測(cè)對(duì)應(yīng)元素的 required 屬性來(lái)判斷表單字段是否為必填項(xiàng)：

let isRequired = document.forms[0].elements["account"].required;

也可以檢測(cè)瀏覽器是否支持 required 屬性：

let isRequiredSupported = "required" in document.createElement("input");

注意：不同瀏覽器處理必填字段的機(jī)制不同。Firefox、Chrome、IE 和Opera 會(huì)阻止表單提交并在相應(yīng)字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會(huì)阻止提交表單。

數(shù)值范圍

而上面介紹的幾個(gè)如 number/range/datetime/datetime-local/date/month/week/time 幾個(gè)填寫數(shù)字的類型，都可以指定 min/max/step 等幾個(gè)與數(shù)值有關(guān)的屬性。step 屬性用于規(guī)定合法數(shù)字間隔，如 step="2"，則合法數(shù)字應(yīng)該為 0、2、4、6，依次類推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數(shù)。

也可以使用 stepUp() 和 stepDown() 方法對(duì) <input> 元素中的值進(jìn)行加減，它倆會(huì)接收一個(gè)可選參數(shù)，用于表示加減的數(shù)值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10

輸入模式

HTML5 還為文本添加了 pattern 屬性，用于指定一個(gè)正則表達(dá)式。這樣就可以自己設(shè)置 <input> 元素的輸入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的開頭和末尾分別假設(shè)有^和$。這意味著輸入內(nèi)容必須從頭到尾都嚴(yán)格與模式匹配。

與新增的輸入類型一樣，指定 pattern 屬性也不會(huì)阻止用戶輸入無(wú)效內(nèi)容。模式會(huì)應(yīng)用到值，然后瀏覽器會(huì)知道值是否有效。通過(guò)訪問(wèn) pattern 屬性可以讀取模式：

let pattern = document.forms[0].elements["count"].pattern;

使用如下代碼可以檢測(cè)瀏覽器是否支持pattern 屬性：

let isPatternSupported = "pattern" in document.createElement("input");

檢測(cè)有效性

HTML5 新增了 checkValidity() 方法，用來(lái)檢測(cè)表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會(huì)被視為無(wú)效，字段值不匹配 pattern 屬性也會(huì)被視為無(wú)效。如下所示：

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

要檢查整個(gè)表單是否有效，可以直接在表單上調(diào)用checkValidity()方法。這個(gè)方法會(huì)在所有字段都有效時(shí)返回true，有一個(gè)字段無(wú)效就會(huì)返回false：

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

validity 屬性會(huì)返回一個(gè)ValidityState 對(duì)象，表示 <input> 元素的校驗(yàn)狀態(tài)。返回的對(duì)象包含一些列的布爾值的屬性：

customError：如果設(shè)置了 setCustomValidity() 就返回 true，否則返回false。
patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
rangeOverflow：如果字段值大于 max 的值則返回true。
rangeUnderflow：如果字段值小于 min 的值則返回true。
stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
tooLong：如果字段值的長(zhǎng)度超過(guò)了 maxlength 屬性指定的值則返回true。
typeMismatch：如果字段值不是 "email" 或"url" 要求的格式則返回true。
valid：如果其他所有屬性的值都為false 則返回true。與checkValidity()的條件一致。
valueMissing：如果字段是必填的但沒有值則返回true。

因此，通過(guò) validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("請(qǐng)指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請(qǐng)指定電子郵件地址.");
    } else {
        console.log("值無(wú)效.");
    }
}

禁用驗(yàn)證

通過(guò)指定 novalidate 屬性可以禁止對(duì)表單進(jìn)行任何驗(yàn)證：

<form method="post" action="/signup" novalidate>
    <!-- 表單元素 -->
</form>

也可以在 JavaScript 通過(guò) noValidate 屬性設(shè)置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate = true; // 關(guān)閉驗(yàn)證

如果一個(gè)表單中有多個(gè)提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過(guò)該按鈕無(wú)需驗(yàn)證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊(cè)提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗(yàn)證的提交按鈕">
</form>

也可以使用 JavaScript 設(shè)置 formNoValidate 屬性：

// 關(guān)閉驗(yàn)證
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

總結(jié)

以上總結(jié)了 <input> 和 <textarea> 兩個(gè)元素的一些功能，主要是 <input> 元素可以通過(guò)設(shè)置 type 屬性獲取不同類型的輸入框，可以通過(guò)監(jiān)聽鍵盤事件并檢測(cè)要插入的字符來(lái)控制文本框的內(nèi)容。

還有一些與剪貼板相關(guān)的事件，并對(duì)剪貼的內(nèi)容進(jìn)行檢測(cè)。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗(yàn)證相關(guān)的屬性和方法。

例1：

<!DOCTYPE html>
<html>
<head>
<title>新建網(wǎng)頁(yè)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<h2>獲得元素節(jié)點(diǎn)</h2>
<p><input type="text" id="username" value="tom"></p>
<p><input type="text" id="useremail" value="tom@163.com"></p>
</body>
</html>
<script type="text/javascript">
//② document.getElementsByTagName(tag標(biāo)簽名稱)
// 該方法會(huì)返回一個(gè)對(duì)象集合(無(wú)論對(duì)應(yīng)的節(jié)點(diǎn)有幾個(gè))
var hh = document.getElementsByTagName('h2');
console.log(hh);//對(duì)象集合 HTMLCollection[h2]
//兩種方式 可以從對(duì)象集合中 獲得具體的一個(gè)元素節(jié)點(diǎn)對(duì)象
console.log(hh[0]); //<h2>
console.log(hh.item(0)); //<h2>
var ipt = document.getElementsByTagName('input');
console.log(ipt);//HTMLCollection[input#username 屬性(attribute)值 = "tom", input#useremail 屬性(attribute)值 = "tom@163.com"]
console.log(ipt.item(1));
</script>

關(guān)于節(jié)點(diǎn)的獲取需待HTML加載完畢后, javascript代碼才能執(zhí)行;

為此可以使用DOM1事件機(jī)制、window.onload語(yǔ)句、將javascript語(yǔ)句放在HTML語(yǔ)句最后;

而DOM2事件機(jī)制(即事件監(jiān)聽函數(shù))要放在window.onload語(yǔ)句中, 或者放在HTML語(yǔ)句最后;

實(shí)例2：

在線咨詢

上一篇：window彈出、提示框
下一篇：把飛書云文檔變成HTML郵件：?jiǎn)栴}挑戰(zhàn)與解決歷程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

類型	描述
number	數(shù)字值的輸入
date	日期輸入
color	顏色輸入
range	一定范圍內(nèi)的值的輸入
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年份
time	允許用戶選擇時(shí)間（無(wú)時(shí)區(qū)）
datetime	允許用戶選擇日期和時(shí)間（有時(shí)區(qū)）
datetime-local	允許用戶選擇日期和時(shí)間（無(wú)時(shí)區(qū)）
email	電子郵件地址的輸入
search	搜索（表現(xiàn)類似常規(guī)文本）
tel	電話號(hào)碼的輸入
url	URL地址的輸入

整合營(yíng)銷服務(wù)商

jQuery 獲取和設(shè)置HTML元素

text()方法

示例：

示例：

html()方法

示例：

val()方法

示例：

attr()方法

示例：

示例：

選擇文本

select 事件

取得選中的文本

選中部分文本

輸入過(guò)濾

屏蔽字符

處理剪貼板

自動(dòng)切換

HTML5

必填字段

更多輸入類型

數(shù)值范圍

輸入模式

檢測(cè)有效性

禁用驗(yàn)證

總結(jié)

您的項(xiàng)目需求