javascript中DOM的表單操作（附代碼）

最後更新：2018-09-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

DOM中的表單可以進行什麼樣的操作，操作的方法是什嗎？本篇文章就分享給大家javascript中DOM的表單操作，內容很詳細，一起來看看吧。

1、擷取表單

擷取表單元素

以Document對象中forms屬性來擷取當前HTML頁面所有表單集合
以Document對象中表單的name屬性值來擷取表單元元素

<body><form action="#">    <input type="submit"></form><form name="mylove" action="#">    <input type="submit"></form><script>    console.log(document.forms);//    擷取當前HTML頁面所有表單元素    console.log(document.mylove);//    document表單名稱-有些新瀏覽器是不支援</script></body>

擷取表單組件元素

以HTMLFormElement對象的elements屬性來擷取表單組件的集合

<body><form action="#">    <input type="text" name="username">    <input type="submit"></form><script>    var form = document.forms[0];    console.log(form.elements);</script></body>

2、表單操作

常值內容的選擇

以HTMLElement對象和HTMLTextAreaElement對象中select()方法來擷取文字框所有文字框的內容

<body><form action="#">    <input type="text" id="username" value="請輸入你使用者名稱">    <!---->    <input type="submit">    <!--定義提交按鈕--></form><script>    var username = document.getElementById(username);//    擷取ID屬性    username.addEventListener('focus',function(){        username.select();    })    username.addEventListener('select',function () {        console.log(username.selectionStart.username.selectionEnd);        var value = username.getAttribute('value');        var result = value.substring(username.selectionStart,username.selectionEnd);        console.log(result);    })</script></body>

設定常值內容

在HTML5新增中setSelectionRange()方法，來擷取一個焦點文字框的常值內容

body><form action="#">    <input type="text" id="username" value="請輸入你使用者名稱">    <!---->    <input type="submit">    <!--定義提交按鈕--></form><script>    var username = document.getElementById(username);//    擷取ID屬性    username.addEventListener('focus',function(){        username.select();    })    username.addEventListener('select',function () {        console.log(username.selectionStart.username.selectionEnd);        var value = username.getAttribute('value');        var result = value.substring(username.selectionStart,username.selectionEnd);        console.log(result);    })</script></body>

操作剪下板

以copy；cut，paste 來設定操作剪下板的複製，剪下和粘貼

<body><form action="#">    <input type="text" id="username" value="請輸入你使用者名稱">    <input type="text" id="username1">    <input type="submit"></form><script>    var username = document.getElementById('username');    username.addEventListener('copy',function (event) {        var data = event.clipboardData || window.clipboardData;        console.log(data);        console.log('這是複製操作');        var value = username.value;        var result = value.substring(selectionStart,username.selectionEnd);        console.log(result);        data.setData('text',result);    });    username.addEventListener('cut',function () {        console.log('這是個剪下操作');    });    var username1 = document.getElementById('username1');    username1.addEventListener('paste',function (event) {        event.preventDefault();        var data = event.clipboardData || window.clipboardData;        var result = data.getData('text');        /*得到DataTransfer對象        * geData()方法-擷取資料內容*/        if (result === '使用者名稱') {            result ='***';        }        username1.value = result;    })</script></body>

下拉式清單的操作

是以select和option對象來建立病提供一些屬性和方法

<form action="#">    <select id="yx">        <option id="dj" value="dj">單機</option>        <option value="wy">網頁</option>        <option value="dy">端遊</option>    </select>    <select id="cyx1" multiple size="5">        <option value="dj">單機</option>        <option value="wy">網頁</option>        <option value="dy">端遊</option>    </select></form><script>    var yx = document.getElementById('yx');    // HTMLSelectElement對象    console.log(yx.length);    console.log(yx.options);    console.log(yx.selectedIndex);// 被選中<option>的索引值    // 屬性    var yx1 = document.getElementById('yx1');    // size屬性預設值是 0    console.log(yx1.size);    console.log(yx1.item(1));    yx1.remove(2);    var dj = document.getElementById('dj');    console.log(dj.index);    console.log(dj.selected);    console.log(dj.text);    console.log(dj.value);</script>

3、表單驗證

以checkValidity()如元素值不存在驗證問題，會是true，如不是則返回false
以setCustomValidity（message）會為元素自訂個錯誤資訊，如果設定了，該元素未無效，並顯示

<body><form action="#">    <input type="text" id="username">    <input type="submit"></form><script>    var username = document.getElementById('username');    username.addEventListener('blur',function () {        var value = username.value;        if (value === '' || value === undefined || vaiue === null) {            console.log('請輸入你使用者名稱');        }    });</script></body>

4.表單提交

submit事件

以submit表示提交表單

<body><form action="#">    <input type="text" id="username">    <input type="submit"></form><script>    var form = document.forms[0];    form.addEventListener('submit',function (event) {        console.log('該表單已被提交');    });</script></body>

submit(）方法

以submit表示提交表單，並用使用任意普通按鈕即可完成提交

<body><form action="#">    <input type="text" id="username">    <input id="qyc" type="button" value="提交"></form><script>    var qyc = document.getElementById('qyc');    qyc.addEventListener('click',function () {        var form = document.forms[0];        form.submit();//提交表單    });</script></body>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More