?Element Plus 表單由以下幾個關鍵部分構成：

1. <el-form>: 表單容器。它是整個表單的根組件，負責管理表單數據、校驗規則、布局方式等。
2. <el-form-item>: 表單項容器。用于包裹一個具體的表單控件（如輸入框、選擇器等）及其標簽（label）、校驗狀態提示。它是實現布局和校驗的基本單元。
3. 表單控件 (Form Controls): 實際的輸入組件，如?<el-input>,?<el-select>,?<el-date-picker>,?<el-checkbox>,?<el-switch>?等。這些控件通過?v-model?或?:model?與?el-form?的數據模型綁定。
4. 數據模型 (Model): 一個 JavaScript 對象，通常在?setup?或?data?中定義，用于存儲表單各字段的值。el-form?的?model?屬性指向這個對象。
5. 校驗規則 (Rules): 一個對象，定義了每個表單字段需要滿足的校驗條件（如必填、格式、長度等）。el-form?的?rules?屬性指向這個對象。

---

<el-form>?詳解

• 作用: 表單的頂層容器，協調?el-form-item?和表單控件。
• 核心屬性:
  • model:?必需。綁定表單的數據對象。例如?:model="form", 其中?form?是?{ name: '', email: '' }?這樣的對象。
  • rules:?可選。定義表單校驗規則的對象。例如?:rules="formRules"。
  • label-width: 設置所有?el-form-item?標簽（label）的寬度。可以是字符串如?"100px"?或數字?100。如果某個?el-form-item?需要不同的寬度，可以在該?el-form-item?上單獨設置。
  • label-position: 設置標簽的位置。可選值：
    • right?(默認): 標簽在控件右側（當?label-width?有效時，通常表現為左對齊標簽，右對齊控件）。
    • left: 標簽在控件左側。
    • top: 標簽在控件上方。常用于移動端或需要節省水平空間的場景。
  • label-suffix: 標簽后綴，如冒號?":"?(默認) 或其他字符。
  • hide-required-asterisk: 是否隱藏必填字段的紅色星號標記。默認?false?(顯示星號)。
  • require-asterisk-position: 星號位置。left?(默認) 或?right。
  • inline: 是否讓表單項 (el-form-item) 水平排列。設置為?true?時，表單項會顯示在同一行，適合構建查詢表單。此時?label-position?通常為?right?或?left。
  • disabled: 是否禁用該表單內所有控件。如果控件自身也有?disabled，則以控件自身的設置為準。
  • status-icon: 是否在輸入框中顯示校驗狀態圖標（如成功對勾、錯誤叉號）。默認?false。
  • validate-on-rule-change: 當?rules?屬性改變后，是否立即觸發一次校驗。默認?true。
  • scroll-to-error: 提交表單時，如果校驗失敗，是否自動滾動到第一個錯誤的表單項。默認?false。
  • size: 為表單內的控件設置統一的尺寸 (large,?default,?small)。可以被控件自身的?size?覆蓋。
• 核心方法 (通過 ref 調用):
  • validate(callback: Function): 對整個表單進行校驗。callback?函數接收兩個參數：valid?(布爾值，表示校驗是否通過) 和?invalidFields?(包含未通過校驗字段的對象)。這是提交表單前必須調用的方法。
  • validateField(props: string | string[], callback: Function): 對表單的指定字段進行校驗。props?可以是字段名字符串或字符串數組。
  • resetFields(): 對整個表單進行重置，將其恢復到初始狀態（清空輸入、移除校驗狀態）。注意：這會將?model?的值重置為?el-form?組件初始化時?model?對象的值。如果初始值是?''，則重置為空；如果初始值是?'default'，則重置為?'default'。
  • clearValidate(props?: string | string[]): 移除表單項的校驗結果。可以指定一個或多個字段名，或不傳參清除所有。
  • scrollToField(prop: string): 滾動到指定?prop?名稱的表單項。

---

<el-form-item>?詳解

• 作用: 包裹一個表單控件，提供布局、標簽、校驗狀態顯示（錯誤信息、加載狀態圖標）。
• 核心屬性:
  • prop:?必需（當?el-form?有?rules?時）。指定該表單項對應?model?中的字段名。例如?prop="name"?對應?model.name。這是?el-form?能夠找到并校驗特定字段的關鍵。
  • label: 該表單項的標簽文本。
  • label-width: 覆蓋?el-form?的?label-width，設置此單項的標簽寬度。
  • required: 是否必填。如果?rules?中有?required: true，通常會自動顯示紅色星號，此屬性可顯式控制。
  • rules: 為該單項設置獨立的校驗規則。如果?el-form?的?rules?中也定義了此?prop?的規則，兩者會合并。
  • error: 自定義顯示的錯誤信息文本。設置后，會強制顯示為錯誤狀態，優先級高于校驗規則產生的錯誤信息。常用于服務端返回的錯誤。
  • show-message: 是否顯示校驗錯誤信息。默認?true。
  • inline-message: 是否以行內形式顯示校驗信息（錯誤信息顯示在控件右側，而不是下方）。默認?false。
  • size: 設置該單項內控件的尺寸。
• 插槽 (Slots):
  • 默認插槽: 放置表單控件。
  • label: 自定義標簽內容（可以包含 HTML 或組件）。
  • error: 自定義錯誤信息的顯示內容。

---

表單校驗 (Validation) 詳解

校驗是 el-form 最強大的功能之一。它支持聲明式規則和靈活的異步校驗。

1. 校驗規則 (rules) 結構:

   • rules?是一個對象，其鍵 (key) 對應?model?中的字段名 (prop)。
   • 值是一個數組，包含一個或多個校驗規則對象。
   • 規則對象常用屬性:
     • required:?true?表示必填。
     • message: 校驗失敗時顯示的提示消息。
     • trigger: 觸發校驗的事件。常用值：
       • blur: 失去焦點時觸發。
       • change: 值改變時觸發（對于?input?是輸入時，對于?select?是選擇時）。
       • 可以是數組?['blur', 'change']。
     • type: 數據類型。如?string,?number,?boolean,?array,?object,?date,?url,?email?等。指定類型后，校驗器會進行相應的類型檢查。
     • min?/?max: 字符串長度或數組長度的最小/最大值。
     • len: 長度必須等于指定值。
     • pattern: 正則表達式，值必須匹配該模式。
     • validator:?自定義校驗函數。接收三個參數：rule?(當前規則對象),?value?(當前字段的值),?callback?(校驗完成后的回調函數)。必須調用?callback()，傳入?new Error('錯誤信息')?表示失敗，或?callback()?(無參數) 表示成功。
     • asyncValidator:?異步自定義校驗函數。與?validator?類似，但它返回一個?Promise。Promise?resolve 表示成功，reject 一個?Error?實例表示失敗。

2. 內置校驗類型:

   • Element Plus 內置了對?string,?number,?boolean,?array,?object,?date,?url,?email,?pattern?等類型的校驗。
   • 例如，type: 'email'?會自動使用郵箱正則進行校驗。

3. 自定義校驗函數示例:

   const formRules = reactive({password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ min: 6, message: '密碼長度至少6位', trigger: 'blur' }],confirmPassword: [{ required: true, message: '請確認密碼', trigger: 'blur' },{validator: (rule, value, callback) => {if (value === '') {callback(new Error('請再次輸入密碼'));} else if (value !== form.password) { // 假設 form 是 model 對象callback(new Error('兩次輸入的密碼不一致'));} else {callback(); // 校驗通過}},trigger: 'blur'}],asyncCheck: [{asyncValidator: (rule, value, callback) => {return new Promise((resolve, reject) => {// 模擬異步請求setTimeout(() => {if (value === 'async') {resolve(); // 成功} else {reject(new Error('必須輸入 "async"')); // 失敗}}, 1000);});},trigger: 'blur'}]
   });