Vant4 Form 表單

介紹

用于數(shù)據(jù)錄入、校驗(yàn)，支持輸入框、單選框、復(fù)選框、文件上傳等類(lèi)型，需要與 Field 輸入框 組件搭配使用。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Form, Field, CellGroup } from 'vant';

const app = createApp();
app.use(Form);
app.use(Field);
app.use(CellGroup);

代碼演示

基礎(chǔ)用法

在表單中，每個(gè) Field 組件 代表一個(gè)表單項(xiàng)，使用 Field 的 ?rules? 屬性定義校驗(yàn)規(guī)則。

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="用戶名"
      label="用戶名"
      placeholder="用戶名"
      :rules="[{ required: true, message: '請(qǐng)?zhí)顚?xiě)用戶名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密碼"
      label="密碼"
      placeholder="密碼"
      :rules="[{ required: true, message: '請(qǐng)?zhí)顚?xiě)密碼' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

import { ref } from 'vue';

export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values) => {
      console.log('submit', values);
    };

    return {
      username,
      password,
      onSubmit,
    };
  },
};

校驗(yàn)規(guī)則

通過(guò) ?rules? 定義表單校驗(yàn)規(guī)則，所有可用字段見(jiàn)下方表格。

<van-form @failed="onFailed">
  <van-cell-group inset>
    <!-- 通過(guò) pattern 進(jìn)行正則校驗(yàn) -->
    <van-field
      v-model="value1"
      name="pattern"
      placeholder="正則校驗(yàn)"
      :rules="[{ pattern, message: '請(qǐng)輸入正確內(nèi)容' }]"
    />
    <!-- 通過(guò) validator 進(jìn)行函數(shù)校驗(yàn) -->
    <van-field
      v-model="value2"
      name="validator"
      placeholder="函數(shù)校驗(yàn)"
      :rules="[{ validator, message: '請(qǐng)輸入正確內(nèi)容' }]"
    />
    <!-- 通過(guò) validator 返回錯(cuò)誤提示 -->
    <van-field
      v-model="value3"
      name="validatorMessage"
      placeholder="校驗(yàn)函數(shù)返回錯(cuò)誤提示"
      :rules="[{ validator: validatorMessage }]"
    />
    <!-- 通過(guò) validator 進(jìn)行異步函數(shù)校驗(yàn) -->
    <van-field
      v-model="value4"
      name="asyncValidator"
      placeholder="異步函數(shù)校驗(yàn)"
      :rules="[{ validator: asyncValidator, message: '請(qǐng)輸入正確內(nèi)容' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      提交
    </van-button>
  </div>
</van-form>

import { ref } from 'vue';
import { closeToast, showLoadingToast } from 'vant';

export default {
  setup() {
    const value1 = ref('');
    const value2 = ref('');
    const value3 = ref('abc');
    const value4 = ref('');
    const pattern = /\d{6}/;

    // 校驗(yàn)函數(shù)返回 true 表示校驗(yàn)通過(guò)，false 表示不通過(guò)
    const validator = (val) => /1\d{10}/.test(val);

    // 校驗(yàn)函數(shù)可以直接返回一段錯(cuò)誤提示
    const validatorMessage = (val) => `${val} 不合法，請(qǐng)重新輸入`;

    // 校驗(yàn)函數(shù)可以返回 Promise，實(shí)現(xiàn)異步校驗(yàn)
    const asyncValidator = (val) =>
      new Promise((resolve) => {
        showLoadingToast('驗(yàn)證中...');

        setTimeout(() => {
          closeToast();
          resolve(val === '1234');
        }, 1000);
      });

    const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };

    return {
      value1,
      value2,
      value3,
      value4,
      pattern,
      onFailed,
      validator,
      asyncValidator,
    };
  },
};

表單項(xiàng)類(lèi)型 - 開(kāi)關(guān)

在表單中使用 Switch 組件。

<van-field name="switch" label="開(kāi)關(guān)">
  <template #input>
    <van-switch v-model="checked" />
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(false);
    return { checked };
  },
};

表單項(xiàng)類(lèi)型 - 復(fù)選框

在表單中使用 Checkbox 組件。

<van-field name="checkbox" label="復(fù)選框">
  <template #input>
    <van-checkbox v-model="checked" shape="square" />
  </template>
</van-field>
<van-field name="checkboxGroup" label="復(fù)選框組">
  <template #input>
    <van-checkbox-group v-model="groupChecked" direction="horizontal">
      <van-checkbox name="1" shape="square">復(fù)選框 1</van-checkbox>
      <van-checkbox name="2" shape="square">復(fù)選框 2</van-checkbox>
    </van-checkbox-group>
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref(false);
    const groupChecked = ref([]);
    return {
      checked,
      groupChecked,
    };
  },
};

表單項(xiàng)類(lèi)型 - 單選框

在表單中使用 Radio 組件。

<van-field name="radio" label="單選框">
  <template #input>
    <van-radio-group v-model="checked" direction="horizontal">
      <van-radio name="1">單選框 1</van-radio>
      <van-radio name="2">單選框 2</van-radio>
    </van-radio-group>
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const checked = ref('1');
    return { checked };
  },
};

表單項(xiàng)類(lèi)型 - 步進(jìn)器

在表單中使用 Stepper 組件。

<van-field name="stepper" label="步進(jìn)器">
  <template #input>
    <van-stepper v-model="value" />
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(1);
    return { value };
  },
};

表單項(xiàng)類(lèi)型 - 評(píng)分

在表單中使用 Rate 組件。

<van-field name="rate" label="評(píng)分">
  <template #input>
    <van-rate v-model="value" />
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(3);
    return { value };
  },
};

表單項(xiàng)類(lèi)型 - 滑塊

在表單中使用 Slider 組件。

<van-field name="slider" label="滑塊">
  <template #input>
    <van-slider v-model="value" />
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const value = ref(50);
    return { value };
  },
};

表單項(xiàng)類(lèi)型 - 文件上傳

在表單中使用 Uploader 組件。

<van-field name="uploader" label="文件上傳">
  <template #input>
    <van-uploader v-model="value" />
  </template>
</van-field>

import { ref } from 'vue';

export default {
  setup() {
    const value = ref([
      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
    ]);
    return { value };
  },
};

表單項(xiàng)類(lèi)型 - 選擇器

在表單中使用 Picker 組件。

<van-field
  v-model="result"
  is-link
  readonly
  name="picker"
  label="選擇器"
  placeholder="點(diǎn)擊選擇城市"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
  <van-picker
    :columns="columns"
    @confirm="onConfirm"
    @cancel="showPicker = false"
  />
</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const result = ref('');
    const showPicker = ref(false);
    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '寧波', value: 'Ningbo' },
      { text: '溫州', value: 'Wenzhou' },
      { text: '紹興', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];

    const onConfirm = ({ selectedOptions }) => {
      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };

    return {
      result,
      columns,
      onConfirm,
      showPicker,
    };
  },
};

表單項(xiàng)類(lèi)型 - 日期選擇器

在表單中使用 DatePicker 組件。

<van-field
  v-model="result"
  is-link
  readonly
  name="datePicker"
  label="時(shí)間選擇"
  placeholder="點(diǎn)擊選擇時(shí)間"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" position="bottom">
  <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const result = ref('');
    const showPicker = ref(false);
    const onConfirm = ({ selectedValues }) => {
      result.value = selectedValues.join('/');
      showPicker.value = false;
    };

    return {
      result,
      onConfirm,
      showPicker,
    };
  },
};

表單項(xiàng)類(lèi)型 - 省市區(qū)選擇器

在表單中使用 Area 組件。

<van-field
  v-model="result"
  is-link
  readonly
  name="area"
  label="地區(qū)選擇"
  placeholder="點(diǎn)擊選擇省市區(qū)"
  @click="showArea = true"
/>
<van-popup v-model:show="showArea" position="bottom">
  <van-area
    :area-list="areaList"
    @confirm="onConfirm"
    @cancel="showArea = false"
  />
</van-popup>

import { ref } from 'vue';
import { areaList } from '@vant/area-data';

export default {
  setup() {
    const result = ref('');
    const showArea = ref(false);
    const onConfirm = ({ selectedOptions }) => {
      showArea.value = false;
      areaCode.value = selectedOptions.map((item) => item.text).join('/');
    };

    return {
      result,
      areaList,
      showArea,
      onConfirm,
    };
  },
};

表單項(xiàng)類(lèi)型 - 日歷

在表單中使用 Calendar 組件。

<van-field
  v-model="value"
  is-link
  readonly
  name="calendar"
  label="日歷"
  placeholder="點(diǎn)擊選擇日期"
  @click="showCalendar = true"
/>
<van-calendar v-model:show="showCalendar" @confirm="onConfirm" />

import { ref } from 'vue';

export default {
  setup() {
    const result = ref('');
    const showCalendar = ref(false);
    const onConfirm = (date) => {
      result.value = `${date.getMonth() + 1}/${date.getDate()}`;
      showCalendar.value = false;
    };

    return {
      result,
      onConfirm,
      showCalendar,
    };
  },
};

API

Props

表單項(xiàng)的 API 參見(jiàn)：Field 組件

Rule 數(shù)據(jù)結(jié)構(gòu)

使用 Field 的 ?rules? 屬性可以定義校驗(yàn)規(guī)則，可選屬性如下:

validate-trigger 可選值

通過(guò) ?validate-trigger? 屬性可以自定義表單校驗(yàn)的觸發(fā)時(shí)機(jī)。

Events

方法

通過(guò) ref 可以獲取到 Form 實(shí)例并調(diào)用實(shí)例方法，詳見(jiàn)組件實(shí)例方法。

類(lèi)型定義

組件導(dǎo)出以下類(lèi)型定義：

import type { FormProps, FormInstance } from 'vant';

?FormInstance? 是組件實(shí)例的類(lèi)型，用法如下：

import { ref } from 'vue';
import type { FormInstance } from 'vant';

const formRef = ref<FormInstance>();

formRef.value?.submit();

Slots

常見(jiàn)問(wèn)題

如何自定義表單項(xiàng)？

Vant 支持在 Form 組件中插入自定義的表單項(xiàng)，具體用法參見(jiàn) useCustomFieldValue。