vant表单校验

关注

原创最新推荐文章于 2026-06-29 11:58:31 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

Vant 2 - 移动端 Vue 组件库 _ 问题记录 Vant 2 - 移动端 Vue 组件库 _ 问题记录发布初衷：记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题，方便以后再次遇到类似问题，能够快时查阅解决，大家要是觉得有帮助的话，可以收藏一下，博主会不定时更新文章的目录基础组件 Popup 弹出层表单组件 DatetimePicker 时间选择 Field 输入框 Form 表单 Picker 选择器 Radio 单选框 Uploader 文件上传展示组件 List 列表导航组件 Tab 标签页阅读详情

      <!-- 手机号 -->
      <van-field
        :readonly="detail"
        v-model="form.userTel"
        name="手机号"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式错误！',
            trigger: 'onBlur',
          },
        ]"
      />
      <!-- 单位 -->
      <van-field
        :readonly="detail"
        v-model="form.unit"
        name="单位"
        label="单位"
        placeholder="请输入单位"
        :rules="[{ required: true, message: '请输入单位' }]"
      />
      <!-- 身份证 -->
      <van-field
        :readonly="detail"
        v-model="form.userId"
        name="身份证"
        label="身份证"
        placeholder="请输入身份证"
        :rules="[
          { required: true, message: '请输入身份证' },
          {
            pattern:
              /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确格式',
            trigger: 'onBlur',
          },
        ]"
      />