正则验证手机号（vant实例）

最新推荐文章于 2025-09-12 00:38:00 发布

原创最新推荐文章于 2025-09-12 00:38:00 发布 · 9.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vant #正则表达式 #手机号

技术专栏收录该内容

59 篇文章

订阅专栏

本文介绍了一个使用正则表达式验证手机号码格式的Vue组件实例，确保输入的手机号符合中国手机号的标准格式。

关键代码

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