DOM編程系列之表單操做
表單操做
獲取表單元素
- Document對象提供一系列獲取方法
- Document對象提供的forms屬性 - 用於獲取當前頁面中全部表單元素的集合
- Document對象提供的<form>元素的name屬性值
- 若是name屬性值對應只有一個表單時 - 獲得的就是那個<form>元素
-若是name屬性值對應具備多個表單時 - 獲得的是具備相同的name屬性值的表單的集合
示例代碼:正則表達式
<body>
<form action="#">
<!-- submit - 表示提交按鈕 -->
<input type="submit">
</form>
<form name="myform" action="#">
<input type="submit">
</form>
<script>
/*
獲取當前HTML頁面中個全部的表單元素
* 該方法是經過表單特有屬性獲取HTML頁面全部表單
*/
console.log(document.forms);
/*
document.表單名稱 - 有些版本瀏覽器不支持
* 該方法是經過name屬性獲取指定表單
*/
console.log(document.myform);
</script>
</body>
獲取表單組件元素
- Document對象提供的一系列獲取方法
- <form>元素在DOM中的對象提供了elements屬性 - 獲得指定表單中全部組件的集合
-
經過DOM的Document對象提供的獲取方法獲得頁面中的標籤數組
- 該變量是Node類型的對象
- 該變量是Element類型的對象
- 該變量是HTMLFormElement類型的對象 - 當前獲取的是<form>元素
-
結論:爲何能夠同時是三種類型的對象:瀏覽器
- 由於最上層是 Node <- 其次是 Element <- 以後是HTMLElement <- 最後是 HTMLFormElement
- <form>方法裏面在DOM中就會獲得HTMLFormElement對象而後在這個對象裏面提供了一個屬性叫elements,(對象裏就是屬性跟方法)elements屬性就是HTMLFormElement對象裏提供的屬性內容.
示例代碼:ui
<body>
<form action="#">
<!-- submit - 表示提交按鈕 -->
<input type="submit">
</form>
<form name="myform" action="#">
<input type="submit">
</form>
<script>
/*
獲取當前HTML頁面中個全部的表單元素
* 該方法是經過表單特有屬性獲取HTML頁面全部表單
*/
console.log(document.forms);
/*
document.表單名稱 - 有些版本瀏覽器不支持
* 該方法是經過name屬性獲取指定表單
*/
console.log(document.myform);
</script>
</body>
文本內容的選擇
- 選擇文本內容 HTMLInputElement對象提供了select()方法 用來選擇當前文本框的全部文本內容
示例代碼:url
<body>
<form action="#">
<!-- 輸入框 -->
<input type="text" id="username" value="帥哥你叫啥?">
<!-- submit - 表示提交按鈕 -->
<input type="submit">
</form>
<script>
// HTMLInputElement對象
var username = document.getElementById('username');
/*
* 綁定獲取焦點(focus)事件
* 失去焦點(blur)事件
*/
username.addEventListener('focus',function () {
// select()方法 - 選擇當前輸入框中的全部文本內容(就是全選)
username.select();
});
/*
select事件
* 只要選擇對應元素的文本內容是被觸發
* select()方法
*/
username.addEventListener('select',function () {
/*
HTMLInputElement對象
* selectionStart - 表示用戶選中文文本內容的開始索引值
* selectionEnd - 表示用戶選中文文本內容的結束索引值的下一個值
*/
console.log(username.selectionStart,username.selectionEnd);
var value = username.getAttribute('value');
// 獲取用戶選取的內容和對應的索引值
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
});
</script>
</body>
設置文本內容
-
setSelectionRange()方法code
- 做用 - 設置選擇的文本內容
-
注意:orm
- 焦點在文本內容的最後面 - select()方法(就是全選的意思)
- 焦點在設置文本內容的範圍內有效
示例代碼:對象
<body>
<form action="#">
<!-- 輸入框 -->
<input type="text" id="username" value="寫點啥吧...">
<!-- 提交按鈕 -->
<input type="submit">
</form>
<script>
// 經過數組的索引值獲取HTML頁面中指定的form表單
var form = document.forms[0];
// 經過索引值獲取指定的form元素
var username = form.elements[0];
username.addEventListener('focus',function () {
/*
setSelectionRange()方法
* 做用 - 設置選擇的文本內容
* 注意:
* 焦點在文本內容的最後面 - select()方法(就是全選的意思)
* 焦點在設置文本內容的範圍內有效
*/
username.setSelectionRange(0,3);
})
</script>
</body>
操做剪切板
- 剪切板主要是複製,粘貼和剪切
示例代碼:索引
<body>
<form action="#">
<!-- 輸入框 -->
<input type="text" id="username" value="隨便寫點啥吧...">
<!-- 輸入框 -->
<input type="text" id="username2">
<!-- 提交按鈕 -->
<input type="submit">
</form>
<script>
// var result;// 全局做用域
// 經過ID屬性查找指定元素節點
var username = document.getElementById('username');
// 爲指定元素綁定 'copy'(複製的意思)事件
username.addEventListener('copy',function (event) {
/*
獲得DataTransfer對象
* setData()方法 - 設置數據內容
*/
// 解決瀏覽器兼容問題
var data = event.clipboardData || window.clipboardData;
console.log(data);
console.log('如今是複製操做...');
var value = username.value;
// 獲取用戶操做時從開始到結束的索引值對應的內容
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
// 至關於鍵盤上的 Ctrl + C 的效果
data.setData('text',result);
});
// 爲指定元素綁定 'cut'(就是剪切的意思)事件
username.addEventListener('cut',function () {
console.log('如今是剪切操做...');
});
// 經過ID屬性獲取指定元素節點
var username2 = document.getElementById('username2');
// 爲指定元素綁定 'paste'(粘貼的意思)事件
username2.addEventListener('paste',function (event) {
// 阻止默認事件
event.preventDefault();
/*
獲得DataTransfer對象
* getData()方法 - 獲取數據內容
*/
var data = event.clipboardData || window.clipboardData;
var result = data.getData('text');
console.log(result);
if (result ==='寫點啥吧') {
result = '啦啦啦';
}
username2.value = result;
});
</script>
</body>
下拉列表操做
示例代碼:事件
<body>
<form action="#">
<select id="city">
<option id="jms" value="jms">佳木斯</option>
<option value="heb">哈爾濱</option>
<option value="hlj">黑龍江</option>
</select>
<select id="city2" multiple size="3">
<option value="jms">佳木斯</option>
<option value="heb">哈爾濱</option>
<option value="hlj">黑龍江</option>
</select>
</form>
<script>
//HTMLSelectElement對象
var city = document.getElementById('city');
//
console.log(city.length);// 調用結果爲 3 - 表示列表項目的個數
console.log(city.options);// 調用結果爲 HTMLOptionsCollection(3) - 表示全部列表項目的類數組集合
console.log(city.selectedIndex);// 調用結果爲 0 - 表示選中項的索引值
var city2 = document.getElementById('city2');
// size屬性默認值爲 0
console.log(city2.size);
// 經過索引值找到指定的項目
console.log(city2.item(1));
// 經過索引值刪除指定的項目
city2.remove(2);
var jms = document.getElementById('jms');
console.log(jms.index);// 調用結果爲 0 - 表示當前元素在其屬性的選項列表中的索引值
console.log(jms.selected);// 調用結果爲 true - 表示當前元素是否被選中
console.log(jms.text);// 調用結果爲 佳木斯 - 表示當前元素的文本內容
console.log(jms.value);// 調用結果爲 jms - 表示當前元素的value屬性值
</script>
</body>
HTML5表單驗證
- 注意: HTML5提供了一些表單驗證的屬性和方法,可是有瀏覽器兼容問題
示例代碼:
<body>
<form action="#">
<!--
HTML表單組件元素的驗證屬性
* required - 驗證當前元素不能爲空
* pattern - 驗證當前元素輸入的內容是否與指定的正則表達式匹配
-->
<input type="text" id="username" required pattern="^[0-9a-zA-Z]{6,12}$">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
/*
表單組件元素對應的對象提供了validity屬性
* 獲得ValidityState對象 - 提供了一系列的驗證屬性
*/
console.log(username.validity);
// console.log(username.validity.valueMissing);
username.addEventListener('blur',function(){
/*
valueMissing屬性
* 做用 - 配合元素中required屬性來使用
* 結果
* true - 表示當前元素內容爲空(錯誤的)
* false - 表示當前元素內容不爲空(正確的)
*/
if (username.validity.valueMissing) {
/*
setCustomValidity(message)方法
* 做用 - 替換瀏覽器默認的錯誤提示信息
* 注意 - 若是輸入正確，必須將錯誤提示信息設置爲空
*/
username.setCustomValidity('用戶名不能爲空');
} else {
username.setCustomValidity('');
}
/*
patternMismatch屬性
* 做用 - 配合元素中pattern屬性來使用
*/
if (username.validity.patternMismatch) {
username.setCustomValidity('用戶名格式錯誤');
} else {
username.setCustomValidity('');
}
/*
* rangeOverflow - 配合元素中max屬性來使用
* rangeUnderflow - 配合元素中min屬性來使用
* stepMismatch - 配合元素中step屬性來使用
* tooLong - 配合元素中maxLength屬性來使用
* tooShort - 配合元素中minLength屬性來使用
* typeMismatch - 配合<input type="url">等元素來使用
* customError - 配合setCustomValidity()方法來使用
* valid - 驗證當前元素是否驗證經過
* true - 表示當前元素驗證經過
* false - 表示當前元素驗證經過
*/
});
</script>
</body>
表單驗證
示例代碼:
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
username.addEventListener('blur',function(){
// 1.獲取當前元素的value屬性值
var value = username.value;
// 2.根據獲取的值進行判斷
if (value === '' || value === undefined || value === null) {
console.log('請輸入你的用戶名');
}
});
</script>
</body>
表單提交
submit事件
- 表單提交就是DOM中給了兩樣東西
- 是submit事件在表單提交時會觸發
- 是在<form>元素對應的DOM對象裏面提供了submit()方法能夠用於提交表單.
- 好處就是去掉表單自己的提交機制經過submit方法的方式進行提交(靈活性比較大想怎麼用均可以)
示例代碼:
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
/* 經過索引值獲取到指定的元素 */
var form = document.forms[0];
/* 爲獲取到的元素綁定 'submit'(按鈕的意思) 事件 */
form.addEventListener('submit',function(event){
console.log('當前表單已被提交...');
// 阻止默認事件
event.preventDefault();
});
</script>
</body>
submit()方法
示例代碼:
<body>
<form action="#">
<input type="text" id="username">
<input id="btn" type="button" value="提交">
</form>
<script>
/* 經過ID屬性獲取指定元素節點 */
var btn = document.getElementById('btn');
/* 爲獲取到的元素節點綁定 'click'(點擊的意思)事件 */
btn.addEventListener('click',function(){
var form = document.forms[0];
form.submit();// 提交表單
});
</script>
</body>
相關文章
- 1. JavaScript 之 DOM [ 表單操做 ]
- 2. 【JavaScript】DOM之表單操做
- 3. DOM編程系列之樣式操做我的分享
- 4. MyBatis 系列教程2-單表操做
- 5. DOM編程系列之事件
- 6. Django系列（三）：單表操做
- 7. JavaScript Dom 編程藝術學習筆記之DOM操做
- 8. jQuery 源碼系列（十五）DOM 操做
- 9. javascript之DOM操做
- 10. jQuery之DOM操做
- 更多相關文章...
- • ionic 列表操作 - ionic 教程
- • XML DOM 節點列表 - XML DOM 教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Java 8 Stream 教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 「插件」Runner更新Pro版，幫助設計師遠離996
- 2. 錯誤 707 Could not load file or assembly ‘Newtonsoft.Json, Version=12.0.0.0, Culture=neutral, PublicKe
- 3. Jenkins 2018 報告速覽，Kubernetes使用率躍升235%！
- 4. TVI-Android技術篇之註解Annotation
- 5. android studio啓動項目
- 6. Android的ADIL
- 7. Android卡頓的檢測及優化方法彙總（線下+線上）
- 8. 登錄註冊的業務邏輯流程梳理
- 9. NDK(1)創建自己的C/C++文件
- 10. 小菜的系統框架界面設計-你的評估是我的決策
歡迎關注本站公眾號,獲取更多信息
