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

最新推荐文章于 2024-07-03 17:20:22 发布

不停喝水

最新推荐文章于 2024-07-03 17:20:22 发布

阅读量4.7k

点赞数 2

分类专栏： # 【Vue2移动端项目】文章标签： javascript html5 vue.js vant 移动端

本文链接：https://blog.csdn.net/weixin_48200589/article/details/118303395

版权

【Vue2移动端项目】专栏收录该内容

17 篇文章 9 订阅

订阅专栏

关键代码

/^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>