Bootstrap

vant表单校验

      <!-- 手机号 -->
      <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',
          },
        ]"
      />

;