表單操作

来源:https://www.cnblogs.com/gaojinshun/archive/2019/05/10/10846296.html
-Advertisement-
Play Games

引言:JavaScript最早被設計出來就是為了實現對註冊表單的驗證,本文簡單的介紹了JavaScript的表單操作 1.獲取表單對象的方法 1.通過表單ID獲取:document.getElementById("formId"); 2.通過表單的索引獲取:document.forms[index] ...


引言:JavaScript最早被設計出來就是為了實現對註冊表單的驗證,本文簡單的介紹了JavaScript的表單操作

1.獲取表單對象的方法

1.通過表單ID獲取:document.getElementById("formId");
2.通過表單的索引獲取:document.forms[index];
3.通過表單的name獲取:document.forms["formName"];
document.formName;

2.表單對象常用的屬性

name 獲取或設置表單的 name 屬性
action 獲取或者設置表單提交的地址
elements 獲取一個數組,包括該表單中所有的表單域
length 獲取表單的表單域的數量
method 獲取或設置表單的表單的提交方式:get(預設)、post
enctype 獲取或設置表單的編碼方式:application/x-www-form-urlencoded(預設)、multipart/form-data、text/plain

3.get方式和post方式的區別

1.get的通過URL參數會顯示在URL中,較不安全。
post的參數通過請求實體(Request body)傳輸,不會顯示在URL中,相對安全。
2.get的參數長度有限制,長度視瀏覽器而定一般在2k左右。post的長度理論上是無限的
3.GET請求會被瀏覽器主動cache(緩存),而POST不會,除非手動設置。
4.GET請求參數會被完整保留在瀏覽器歷史記錄里,而POST中的參數不會被保留。

4.enctype 編碼方式

GET請求只能進行url編碼(以“?name1=value1&name2=value2...”的方式),而POST支持多種編碼方式。
post編碼方式:
  1.application/x-www-form-urlencoded(預設)以(name1=value1&name2=value2...)的方式
2.multipart/form-data
  以類似於(Content-Disposition: form-data; name="name1"
         "value1"
       Content-Disposition: form-data; name="name2"
       "value2"
       )的方式
3.text/plain
  以(name1=value1
    name2=value2
    ...)的方式

5.表單對象的方法

  submit():相當於單擊 submit 按鈕,表示表單提交到指定頁面
  reset():相當於單擊 reset 按鈕,表示所有表單域到初始值

6.表單對象的事件

  onsubmit :在表單提交之前觸發(在表單外部通過submit()提交表單不會觸發onsubmit事件)
  onreset :在表單被重置之前觸發
  註:讓onsubmit事件、onreset事件返回一個false就可以阻止事件的執行(阻止表單提交或重置)
  如:

    <form onreset="return false" onsubmit="return false"></form>

  或

  <form onreset="return test()" onsubmit="return test()"></form>

function test(){
  return false;
}

7.表單域操作

7.1引用表單域的方法

1.document.getElementById(id);
2.form.elements[i];
3.form.elements[name];
4. form.name;
註:“form”是表單對象

7.2 表單域的常用屬性

1.disabled :使表單域不能接受用戶的操作,變為只讀
2.name :獲取或設置表單域的名稱
3.form:獲取該表單域所屬的表單
4.value:獲取或設置表單域的值
5.type :判斷表單域的類型
6.select標簽的屬性

1)selectedIndex表示當前選中的option的索引
2)options表示所有option標簽對象的一個數組
3)length表示右多少個下拉列表項

7.option標簽的屬性

1)value 就是選項的值,提交時會提交該屬性的值
2)text 就是option標簽中間文本值,類似於innerText
3)selected="selected" 表示頁面載入時預設的選項

7.3表單域的方法(A)

1.focus():使表單域獲得焦點
2. blur():使表單域失去焦點

7.4 文本域(text, password, textarea )

通過value 屬性獲取和設置文本域內容
通過defaultValue 獲得文本域的預設值。reset 方法就是調用該屬性。

7.5單選按鈕組和覆選框常用操作

通過 checked 屬性獲得選中和未選中的狀態。
通過遍歷來獲取被選中的值

7.6下拉列表的使用

1.使用 value 屬性獲取和設置下拉列表選中選項的值
2.使用 selectedIndex 屬性獲取當前被選中選項的索引
3.使用 options 屬性獲取所有選項集合
4.使用 option 對象的 value 屬性和 text 屬性, 可以讀寫這兩個屬性。
5.使用 option 對象的 selected 屬性選中該 option

8.表單驗證操作(A)

應用驗證函數的兩種常用的方法:
  1. <input type="submit" onclick="return validate()"/>
  2. <form onsubmit="return validate()"/>
在函數中寫驗證代碼不滿足就返回false(若返回 false,則不提交表單)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背景 在工作過程中,我們常常會從一個項目工程複製代碼到一個新的項目,改項目配置信息、刪除不必要的代碼。 這樣做的效率比較低,也挺繁瑣,更不易於分享協作。 所以,我們可以製作一個cli工具,用來快速創建一個新項目的腳手架。如vue-cli就是一個非常好用的cli工具。 PS:cli 是一個全局安裝的 ...
  • 給背景圖片設置一個預設背景顏色,有以下兩種方法: 轉載 http://www.itxst.com/detail/jnjvv2qu.html ...
  • 3D 在2d的基礎上添加 z 軸的變化 3D 位移:在2d的基礎上添加 translateZ(),或者使用translate3d() translateZ():以方框中心為原點,變大 3D 縮放:在2d的基礎上添加 scaleZ(),或者使用scale3d() scaleZ()和 scale3d() ...
  • 顏色和插值 電腦中的顏色,常用的標準有RGB和HSL。 RGB:色彩模式是通過對紅(Red)、綠(Green)、藍(Blue)三個顏色通道相互疊加來得到額各式各樣的顏色。三個通道的值得範圍都是0~255,因此總共能表示16777216(255*255*255)種,即一千六百多萬種顏色。幾乎包括了人 ...
  • 引言 如果說vue是前端工程化使用較多的骨架,那麼JavaScript就是我們的前端的細胞。MVVM模式讓我們體驗到前端開發的便攜,無需再過多的考慮DOM的操作。而vue的漸進式開發(逐步引用組件,按需引入),也讓許多新手前端開發人員逐步繞過對jQuery的學習。jQuery需要記憶的內容頗多,這也 ...
  • 目前信息化產業發展勢頭很好,互聯網就成為了很多普通人想要涉及的行業,因為相比於傳統行業,互聯網行業漲薪幅度大,機會也多,所以就會大批的人想要轉行來學習web前端開發。目前來講市場上需要的web前端人員非常多,而且按照現在的勢頭,以後會需要更多的web前端開發人員,理由是以後每個人公司都會有自己的網站 ...
  • 一、css語法: css由兩大部分組成:選擇符和聲明,聲明由屬性和屬性值兩部分組成; 選擇符{屬性:屬性值;屬性:屬性值;} 註: a) 屬性和屬性值之間用冒號連接; b)每條聲明結束要加分號; 二、css選擇器: 1.id選擇器: 語法: <標記 id="id名"></標記> #id名{屬性:屬性 ...
  • CSS即層疊樣式表,在創建時有以下幾種樣式: 1.內聯樣式(行內樣式、行間樣式): <標記 style=“屬性:屬性值;”></標記> 2.內部樣式(嵌入式樣式): <style type="text/css"> < 一般放置在head部分 選擇器{ 屬性:屬性值; 屬性:屬性值; } </styl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...