Vant =＞ van-field校验手机号 邮箱校验

关键代码

/^1[3456789]\d{9}$/

栗子：

<template>
        <van-form @submit="onSubmit">
          <van-field
            v-model="phonenumber"
            :rules="[
              { required: true, message: '请填写您的手机号码！' },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！'}
            ]"
            type="tel"
            label="联系方式"
            placeholder="手机号码"
            clearable
          />
         
        </van-form>        
</template>

正则

 /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/ 

栗子：

<template>
  <transition name="fade" appear>
        <van-form @submit="onSubmit">
          <!-- 邮箱 -->
          <van-field
            v-model="email"
            label="邮箱"
            placeholder="邮箱"
            clearable
            :rules="[
              { required: true, message: '请填写您的邮箱！' },
              { pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式错误！'}
            ]"
          />
          
        </van-form>        
  </transition>
</template>