Form 表单

更新: 2025/1/20 字数: 0 字 时长: 0 分钟

说明

使用van-form组件，需要与van-field输入框组件搭配使用。统一了表单的样式风格。更多类型配置参考Vant 表单。

基本使用

表单验证

van-form组件提供了表单验证的功能，只需要在van-field组件中添加rules属性即可。若要显示必填字段的星号，需要设置required属性为auto。验证方式可以使用validator函数，也可以使用pattern正则表达式。validateEmpty可以设置是否对空值进行验证。

<script setup lang="ts">
const state = ref({
  name: "",
  male: "1",
  idNumber: "",
  phone: "",
  address: "",
  livingAddress: "",
  school: "1",
});
const validator = (val) => /^1[3-9]\d{9}$/.test(val);
</script>
<template>
  <van-form input-align="right" required="auto" @submit="onSubmit">
    <div class="overflow-y-scroll px-15 pb-80 pt-11">
      <van-field input-align="left">
        <template #input>
          <div class="title">基本信息</div>
        </template>
      </van-field>
      <van-field
        v-model="state.name"
        label="姓名"
        name="name"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        label="性别"
        name="male"
        :rules="[{ required: true, message: '请选择性别' }]"
      >
        <template #input>
          <van-radio-group
            v-model="state.male"
            direction="horizontal"
            shape="dot"
          >
            <van-radio name="1"> 男 </van-radio>
            <van-radio name="2"> 女 </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="state.idNumber"
        label="身份证号"
        name="idNumber"
        placeholder="请输入"
        :rules="[
          {
            validateEmpty: false,
            pattern:
              /^([1-6][1-9]|50)[0-9]{4}(19|20)[0-9]{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)[0-9]{3}[0-9Xx]$/,
            message: '请输入正确格式的身份证号',
          },
        ]"
      />
      <van-field
        v-model="state.phone"
        label="联系方式"
        name="phone"
        placeholder="请输入"
        :rules="[
          {
            validateEmpty: false,
            validator,
            message: '请输入正确格式的身份证手机号',
          },
        ]"
      />
      <van-field
        v-model="state.address"
        label="户籍地详细地址"
        name="address"
        placeholder="请输入"
      />
      <van-field
        v-model="state.livingAddress"
        label="居住地详细地址 "
        name="livingAddress"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入户籍地详细地址' }]"
      />
    </div>
  </van-form>
</template>

表单项类型-选择器

采用van-field组件，配合van-popup和van-picker组件，实现表单项类型选择器。

<script setup lang="ts">
const state = ref({
  character: "",
});
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "小学", value: "1" },
  { text: "初中", value: "2" },
  { text: "高中", value: "3" },
];
function onConfirm({ selectedOptions }) {
  result.value = selectedOptions[0]?.text;
  state.value.character = selectedOptions[0]?.value;
  result1.value = "";
  state.value.grade = "";
  showPicker.value = false;
}
</script>
<template>
  <van-form input-align="right">
    <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>
  </van-form>
</template>

表单项类型-上传附件

采用van-field组件，配合van-uploader组件，实现表单项类型上传附件。

<van-field
  name="uploader"
  label="上传附件"
  label-align="top"
  input-align="left"
>
  <template #input>
    <van-uploader v-model="state.attachment" upload-icon="plus" />
    <div class="tips mt-10 w-full">
      允许上传文件格式为.doc、.docx、.pdf、.jpg文件；文件大小不能超过3M、最多上传5份
    </div>
  </template>
</van-field>

API

参考Vant 表单 API。