Vant3 Form 表單

介紹

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

實(shí)例演示

引入

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

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="state.username"
      name="用戶名"
      label="用戶名"
      placeholder="用戶名"
      :rules="[{ required: true, message: '請?zhí)顚懹脩裘? }]"
    />
    <van-field
      v-model="state.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 { reactive } from 'vue';

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

    return {
      state,
      onSubmit,
    };
  },
};

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

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

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

export default {
  setup() {
    const state = reactive({
      value1: '',
      value2: '',
      value3: '',
      value4: '',
    });
    const pattern = /\d{6}/;

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

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

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

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });

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

    return {
      state,
      pattern,
      onFailed,
      validator,
      asyncValidator,
    };
  },
};

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

在表單中使用 Switch 組件。

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

import { ref } from 'vue';

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

表單項(xiàng)類型 - 復(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)類型 - 單選框

在表單中使用 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)類型 - 步進(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)類型 - 評分

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

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

在表單中使用 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)類型 - 文件上傳

在表單中使用 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://img.yzcdn.cn/vant/leaf.jpg' }]);
    return { value };
  },
};

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

在表單中使用 Picker 組件。

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

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      value: '',
      showPicker: false,
    });
    const columns = ['杭州', '寧波', '溫州', '嘉興', '湖州'];

    const onConfirm = (value) => {
      state.value = value;
      state.showPicker = false;
    };

    return {
      state,
      columns,
      onConfirm,
    };
  },
};

表單項(xiàng)類型 - 時(shí)間選擇器

在表單中使用 DatetimePicker 組件。

<van-field
  v-model="state.value"
  readonly
  clickable
  name="datetimePicker"
  label="時(shí)間選擇"
  placeholder="點(diǎn)擊選擇時(shí)間"
  @click="state.showPicker = true"
/>
<van-popup v-model:show="state.showPicker" position="bottom">
  <van-datetime-picker
    type="time"
    @confirm="onConfirm"
    @cancel="state.showPicker = false"
  />
</van-popup>

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      value: '',
      showPicker: false,
    });
    const onConfirm = (value) => {
      state.value = value;
      state.showPicker = false;
    };

    return {
      state,
      onConfirm,
    };
  },
};

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

在表單中使用 Area 組件。

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

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      value: '',
      showArea: false,
    });
    const onConfirm = (value) => {
      state.showArea = false;
      state.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
    };

    return {
      state,
      areaList: {}, // 數(shù)據(jù)格式見 Area 組件文檔
      onConfirm,
    };
  },
};

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

在表單中使用 Calendar 組件。

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

import { reactive } from 'vue';

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

    return {
      state,
      onConfirm,
    };
  },
};

API

Props

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

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

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

validate-trigger 可選值

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

Events

方法

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

Slots