Vant4 Form 表單

介紹

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

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎(chǔ)用法

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

<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="用戶名"
      label="用戶名"
      placeholder="用戶名"
      :rules="[{ required: true, message: '請?zhí)顚懹脩裘? }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="密碼"
      label="密碼"
      placeholder="密碼"
      :rules="[{ required: true, message: '請?zhí)顚懨艽a' }]"
    />
  </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,
    };
  },
};

校驗規(guī)則

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

<van-form @failed="onFailed">
  <van-cell-group inset>
    <!-- 通過 pattern 進(jìn)行正則校驗 -->
    <van-field
      v-model="value1"
      name="pattern"
      placeholder="正則校驗"
      :rules="[{ pattern, message: '請輸入正確內(nèi)容' }]"
    />
    <!-- 通過 validator 進(jìn)行函數(shù)校驗 -->
    <van-field
      v-model="value2"
      name="validator"
      placeholder="函數(shù)校驗"
      :rules="[{ validator, message: '請輸入正確內(nèi)容' }]"
    />
    <!-- 通過 validator 返回錯誤提示 -->
    <van-field
      v-model="value3"
      name="validatorMessage"
      placeholder="校驗函數(shù)返回錯誤提示"
      :rules="[{ validator: validatorMessage }]"
    />
    <!-- 通過 validator 進(jìn)行異步函數(shù)校驗 -->
    <van-field
      v-model="value4"
      name="asyncValidator"
      placeholder="異步函數(shù)校驗"
      :rules="[{ validator: asyncValidator, message: '請輸入正確內(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}/;

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

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

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

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

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

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

表單項類型 - 開關(guān)

在表單中使用 Switch 組件。

<van-field name="switch" label="開關(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 };
  },
};

表單項類型 - 復(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,
    };
  },
};

表單項類型 - 單選框

在表單中使用 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 };
  },
};

表單項類型 - 步進(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 };
  },
};

表單項類型 - 評分

在表單中使用 Rate 組件。

<van-field name="rate" label="評分">
  <template #input>
    <van-rate v-model="value" />
  </template>
</van-field>

import { ref } from 'vue';

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

表單項類型 - 滑塊

在表單中使用 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 };
  },
};

表單項類型 - 文件上傳

在表單中使用 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 };
  },
};

表單項類型 - 選擇器

在表單中使用 Picker 組件。

<van-field
  v-model="result"
  is-link
  readonly
  name="picker"
  label="選擇器"
  placeholder="點擊選擇城市"
  @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,
    };
  },
};

表單項類型 - 日期選擇器

在表單中使用 DatePicker 組件。

<van-field
  v-model="result"
  is-link
  readonly
  name="datePicker"
  label="時間選擇"
  placeholder="點擊選擇時間"
  @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,
    };
  },
};

表單項類型 - 省市區(qū)選擇器

在表單中使用 Area 組件。

<van-field
  v-model="result"
  is-link
  readonly
  name="area"
  label="地區(qū)選擇"
  placeholder="點擊選擇省市區(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,
    };
  },
};

表單項類型 - 日歷

在表單中使用 Calendar 組件。

<van-field
  v-model="value"
  is-link
  readonly
  name="calendar"
  label="日歷"
  placeholder="點擊選擇日期"
  @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

表單項的 API 參見：Field 組件

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

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

validate-trigger 可選值

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

Events

方法

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

類型定義

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

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

?FormInstance? 是組件實例的類型，用法如下：

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

const formRef = ref<FormInstance>();

formRef.value?.submit();

Slots

常見問題

如何自定義表單項？

Vant 支持在 Form 組件中插入自定義的表單項，具體用法參見 useCustomFieldValue。