Form 表單

LhForm + LhFormItem 組合：模型校驗（required/自訂規則）、錯誤展示（role="alert"）、子控制項 aria-invalid 聯動、整體 validate/resetFields。

表單校驗

<template>
  <div style="max-width: 640px">
    <LhForm ref="form" :model="form" :rules="rules" label-width="80px">
      <LhFormItem prop="name" label="姓名" required>
        <LhInput v-model="form.name" placeholder="請輸入姓名" />
      </LhFormItem>
      <LhFormItem prop="genre" label="題材">
        <LhSelect v-model="form.genre" :options="genres" placeholder="請選擇" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary" @click="submit">提交</LhButton>
        <LhButton @click="reset">重設</LhButton>
      </LhFormItem>
    </LhForm>
    <p class="demo-note">提交結果：{{ result }}</p>
    <p class="demo-note" style="margin-top: 16px">label-position="top"：</p>
    <LhForm :model="form2" label-position="top">
      <LhFormItem prop="name" label="姓名">
        <LhInput v-model="form2.name" placeholder="標籤在上方" />
      </LhFormItem>
    </LhForm>
    <p class="demo-note" style="margin-top: 16px">inline 行內表單：</p>
    <LhForm :model="form3" inline>
      <LhFormItem prop="name" label="姓名">
        <LhInput v-model="form3.name" placeholder="行內" />
      </LhFormItem>
      <LhFormItem prop="genre" label="題材">
        <LhSelect v-model="form3.genre" :options="genres" placeholder="行內" />
      </LhFormItem>
    </LhForm>
  </div>
</template>

<script>
export default {
  data: () => ({
    form: { name: '', genre: '' },
    form2: { name: '' },
    form3: { name: '', genre: '' },
    rules: { name: [{ required: true, message: '' }] },
    genres: [
      { value: 'shan', label: '山水' },
      { value: 'hua', label: '花鳥' },
    ],
    result: '（未提交）',
  }),
  methods: {
    submit() {
      const form = this.$refs.form
      form.validate().then((ok) => {
        this.result = ok ? '校驗通過 ✓' : '校驗失敗：姓名必填'
      })
    },
    reset() {
      this.$refs.form.resetFields()
      this.result = '（已重設）'
    },
  },
}
</script>

Form Props

屬性	說明	類型	預設值
model	資料模型（必傳）	Record<string, unknown>	—
rules	校驗規則（鍵為 prop 路徑）	Record<string, LhFormRule[]>	—
labelPosition	標籤位置	'left' \| 'right' \| 'top'	'right'
labelWidth	標籤寬度	string \| number	—
inline	行內佈局	boolean	false

FormItem Props

屬性	說明	類型	預設值
prop	對應 model 欄位路徑（支援 a.b 深層）	string	—
label / required / rules	標籤、必填星號、局部規則（與 form 規則合併）	—	—

方法

方法	說明
validate()	校驗全部欄位（註冊項 + rules 覆蓋項），傳回 Promise<boolean>
validateField(prop)	校驗單一欄位
resetFields() / resetField(prop)	還原初始值（掛載時按 rules 鍵快照）

提示

表單控制項的校驗失敗聯動是自動的：控制項注入 LhFormItem 上下文，errorMessage 非空即渲染 aria-invalid，無需手動綁定。