我打造了一款，平民化的、高性能、高靈活的表單（vue

我打造了一款，平民化的、高性能、高靈活的表單（Vue 篇 -- @usaform/element-plus）

**引言**

在Web開發領域，表單處理是每個前端開發者繞不開的核心話題。為了讓更多的開發者能夠輕松創建出高效且高度可定制的表單，我傾力研發并開源了一個基于Vue 3和Element Plus構建的表單解決方案——@usaform/element-plus。本文將深入介紹這款表單組件庫的設計理念、核心特性以及實際應用案例，并附上具體的代碼示例，幫助大家更好地理解和運用。

## **一、設計理念與背景**

### 1. 平民化

@usaform/element-plus旨在降低表單開發門檻，無需深入掌握復雜的狀態管理邏輯，通過簡潔易懂的API即可快速搭建功能完善的表單系統。它集成了Element Plus優秀的UI設計和交互體驗，使得即使是初學者也能迅速上手。

### 2. 高性能

借助Vue 3響應式系統的優化，@usaform/element-plus在保證功能強大的同時，有效提升頁面渲染速度和內存利用率，確保大型表單場景下的流暢運行。

### 3. 高靈活性

提供豐富的表單元素和自定義驗證規則，支持動態表單生成及聯動邏輯，允許開發者根據業務需求靈活配置表單結構和驗證機制。

## **二、@usaform/element-plus核心特性解析**

### 1. 簡潔的聲明式API

```html

<usa-form :model="formData" :rules="formRules">

<usa-form-item label="用戶名" prop="username">

<el-input v-model="formData.username"></el-input>

</usa-form-item>

</usa-form>

</template>

import { defineComponent, ref } from 'vue';

import { UsaForm, UsaFormItem } from '@usaform/element-plus';

export default defineComponent({

components: {

UsaForm,

UsaFormItem,

setup() {

const formData = ref({

username: '',

// ...其他字段

});

const formRules = {

username: [

{ required: true, message: '用戶名不能為空', trigger: 'blur' },

// ...其他驗證規則

};

return { formData, formRules };

});

</script>

```

### 2. 動態表單生成與數據綁定

- 支持通過JSON Schema動態生成表單布局。

- 表單數據雙向綁定，實時同步模型狀態。

### 3. 強大的驗證系統

- 內置多種常用驗證規則，支持自定義驗證函數。

- 提供錯誤提示和實時校驗反饋。

### 4. 聯動與級聯邏輯處理

- 針對多層級、關聯性強的表單場景，提供了便捷的聯動控制能力。

## **三、實戰演示：創建一個復雜的注冊表單**

本部分詳細闡述如何使用@usaform/element-plus構建一個包含手機號驗證、密碼強度檢查以及郵箱格式驗證的注冊表單，并展示如何處理表單提交前的全量驗證。

## **四、最佳實踐與優化技巧**

- 如何進行表單性能調優以減少不必要的計算和DOM操作。

- 如何利用組合API進行更精細的數據管理與控制。

結語：

@usaform/element-plus致力于為廣大開發者帶來極致的表單構建體驗，通過其平民化的設計、卓越的性能表現和高度靈活的擴展性，賦能每一位開發者從容應對各類表單設計挑戰。歡迎廣大開發者試用、反饋，并共同參與完善這一工具，為Vue生態貢獻一份力量。隨著技術的持續迭代，讓我們一起探索更多可能，攜手打造更加高效的Web前端應用。

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數據

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區別，不能包含特殊字符，也不可使用html 標簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時自動對電子郵件地址進行驗證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。

如下實例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內容，是一種特殊按鈕。

如剛才的登錄表單，提交后會返回結果：

重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。

輸入數據

點擊重置按鈕后，表單數據清空

重置清空數據

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網頁中使用窗口框架

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

世界微塵里

吾寧愛與憎

- 2024.03.18 -

在互聯網的世界中，表單是用戶與網站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關重要的角色。在網頁中，我們需要跟用戶進行交互，收集用戶資料，此時就需要用到表單標簽。

HTML提供了一系列的表單標簽，使得開發者能夠輕松地創建出功能豐富的表單。今天我們就來深入探討這些標簽，了解它們的作用以及如何使用它們來構建一個有效的用戶界面。

一、表單的組成

在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構成。

表單域

表單域是一個包含表單元素的區域
在HTML標簽中，<form>標簽用于定義表單域，以實現用戶信息的收集和傳遞
<form>會把它范圍內的表單元素信息提交給服務器

表單控件

這些是用戶與表單交云的各種元素，如<input>（用于創建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執行其他操作）、<select>和<option>（用于創建下拉列表）等。

提示信息

這些信息通常通過<label>標簽提供，它為表單控件提供了描述性文本，有助于提高可訪問性。<label>標簽通常與<input>標簽一起使用，并且可以通過for屬性與<input>標簽的id屬性關聯起來。

這三個部分共同構成了一個完整的HTML表單，使得用戶可以輸入數據，并通過點擊提交按鈕將這些數據發送到Web服務器進行處理。

二、表單元素

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。下面就來介紹HTML中常用的表單元素。

1、<form>標簽：基礎容器

作用：定義一個表單區域，用戶可以在其中輸入數據進行提交。

<form action="submit.php" method="post">

其中action屬性指定了數據提交到的服務器端腳本地址，method屬性定義了數據提交的方式（通常為GET或POST）。

2、<input>標簽：數據輸入

<input>標簽是一個單標簽，用于收集用戶信息。允許用戶輸入文本、數字、密碼等。

<input type="text" name="username" placeholder="請輸入用戶名">

type屬性決定了輸入類型，name屬性定義了數據的鍵名，placeholder屬性提供了輸入框內的提示文本。

<input>標簽的屬性

下面舉個例子來說明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用戶名：<input type="text" value="請輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費注冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>

3、<label>標簽：關聯說明

它與輸入字段如文本框、單選按鈕、復選框等關聯起來，以改善網頁的可用性和可訪問性。<label>標簽有兩種常見的用法：

1）包裹方式：

在這種用法中，<label>標簽直接包裹住關聯的表單元素。例如：

<label>用戶名：<input type="text" name="username"></label>

這樣做的好處是用戶點擊標簽文本時，關聯的輸入字段會自動獲取焦點，從而提供更好的用戶體驗。

2）使用for屬性關聯：

在這種用法中，<label>標簽通過for屬性與目標表單元素建立關聯，for屬性的值應與目標元素的id屬性相匹配。例如：

<label for="username">用戶名：</label><input type="text" id="username" name="username">

這樣做的優勢是單擊標簽時，相關的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。

4、<select>和<option>標簽：下拉選擇

在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用標簽控件定義下拉列表。

注意點：

<select>中至少包含一對<option>
在<option>中定義selected=“selected”時，當前項即為默認選中項

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>標簽：多行文本輸入

當用戶輸入內容較多的情況下，我們可以用表單元素標簽替代文本框標簽。

允許用戶輸入多行文本。

<textarea name="message" rows="5" cols="30">默認文本</textarea>

rows和cols屬性分別定義了文本區域的行數和列數。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內容</textarea>
</form>
</body>
</html>

6、<button>標簽：按鈕控件

創建一個可點擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內聯元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內容和更強的功能。

<button type="submit">提交</button>

type屬性為submit時表示這是一個提交按鈕。

7、<fieldset>和<legend>標簽：分組和標題

通常用于在HTML表單中對相關元素進行分組，并提供一個標題來描述這個組的內容。

<fieldset>標簽：該標簽用于在表單中創建一組相關的表單控件。它可以將表單元素邏輯分組，并且通常在視覺上通過圍繞這些元素繪制一個邊框來區分不同的組。這種分組有助于提高表單的可讀性和易用性。

<legend>標簽：它總是與<fieldset>標簽一起使用。<legend>標簽定義了<fieldset>元素的標題，這個標題通常會出現在瀏覽器渲染的字段集的邊框上方。<legend>標簽使得用戶更容易理解每個分組的目的和內容。

代碼示例：

<form>
<fieldset>
<legend>個人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段，而第二個<fieldset>包含三個復選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內容。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

8、<datalist>標簽：預定義選項列表

<datalist>標簽是HTML5中引入的一個新元素，它允許開發者為輸入字段提供預定義的選項列表。當用戶在輸入字段中輸入時，瀏覽器會顯示一個下拉菜單，其中包含與用戶輸入匹配的預定義選項。

使用<datalist>標簽可以提供更好的用戶體驗，因為它可以幫助用戶選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結合使用，以將預定義的選項列表與特定的輸入字段關聯起來。

下面是一個使用<datalist>標簽的代碼示例：

<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>標簽：計算結果輸出

<output>標簽是HTML5中引入的一個新元素，它用于顯示計算結果或輸出。該標簽通常與JavaScript代碼結合使用，通過將計算結果賦值給<output>元素的value屬性來顯示結果。

<output>標簽可以用于各種類型的計算和輸出，例如數學運算、字符串處理、數組操作等。它可以與<input>元素一起使用，以實時更新計算結果。

下面是一個使用<output>標簽的示例：

<form>
<label for="num1">數字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>標簽：任務進度展示

<progress>標簽是HTML5中用于表示任務完成進度的一個新元素。它通過value屬性和max屬性來表示進度，其中value表示當前完成的值，而max定義任務的總量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我們創建了一個名為"fileDownload"的<progress>元素，并設置了初始值為0，最大值為100。我們還添加了一個按鈕，當用戶點擊該按鈕時，會觸發名為"startDownload"的JavaScript函數。這個函數模擬了一個文件下載過程，通過循環逐步增加<progress>元素的value屬性值，從而顯示下載進度。

11、<meter>標簽：度量衡指示器

<meter>標簽在HTML中用于表示度量衡指示器，它定義了一個已知范圍內的標量測量值或分數值，通常用于顯示磁盤使用情況、查詢結果的相關性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在這個示例中，我們使用了兩個<meter>標簽來分別顯示CPU和內存的使用率。value屬性表示當前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標簽能夠清晰地顯示出資源的使用情況。

需要注意的是，<meter>標簽不應該用來表示進度條，對于進度條的表示，應該使用<progress>標簽。

12、<details>和<summary>標簽：詳細信息展示

<details>和<summary>標簽是HTML5中新增的兩個元素，用于創建可折疊的詳細信息區域。

<details>標簽定義了一個可以展開或折疊的容器，其中包含一些額外的信息。它通常與<summary>標簽一起使用，<summary>標簽定義了<details>元素的標題，當用戶點擊該標題時，<details>元素的內容會展開或折疊。

示例：

<details>
<summary>點擊查看詳細信息</summary>
<p>這里是一些額外的信息，用戶可以點擊標題來展開或折疊這些信息。</p>
</details>

在這個示例中，我們使用了<details>標簽來創建一個可折疊的容器，并在其中添加了一個<summary>標簽作為標題。當用戶點擊這個標題時，容器的內容會展開或折疊。

總結：

HTML表單標簽是構建動態網頁的基石，它們使得用戶能夠與網站進行有效的交互。

通過合理地使用這些標簽，開發者可以創建出既美觀又功能強大的表單，從而提升用戶體驗和網站的可用性。所以說，掌握這些標簽的使用，對于前端開發者來說是至關重要的。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

在線咨詢

上一篇：HTML頁面基本結構和加載過程
下一篇：前端網頁制作DIV+CSS布局介紹

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

我打造了一款，平民化的、高性能、高靈活的表單（vue

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

一、表單的組成

二、表單元素

您的項目需求

我打造了一款，平民化的、高性能、高靈活的表單（vue

一、表單的組成

二、表單元素