手机号格式校验

这种写法不仅可以用于手机号格式校验,还可以用于身份证、邮编等等字段输入编辑校验,只需要更换对应的正则表达式

文章目录


phoneNum:手机号码实体类字段

^1[3|4|5|7|8|9][0-9]\d{8}$手机号正则表达式(匹配以1开头,第二位是3、4、5、7、8、9中的一个,第三位是0到9中的任意一个数字,然后是8位任意数字的字符串)
请添加图片描述


提示:以下是本篇文章正文内容,下面案例可供参考

表头:用于列表显示

 data () {
   return {
     description: '这是手机号校验格式页面',
     // 表头
     columns: [
       {
         title: "手机号码",
         align:"center",
         width:140,
         dataIndex: 'phoneNum',
       },
     ],
   }
 }

新增、编辑、查看页:

手机号输入

  <a-form-model ref='form' :layout='formLayout' :model='model' :rules='validatorRules' :hideRequiredMark='formDisabled' slot='detail'>
    <a-col :span='12'>
      <a-form-model-item :label="手机号" :labelCol='labelCol' :wrapperCol='wrapperCol' prop='phoneNum'>
        <j-input type='from' :trim='true' v-if='!formDisabled' :placeholder="请输入手机号" v-model='model.phoneNum' />
        <span v-else>{{ model.phoneNum}}</span>
      </a-form-model-item>
    </a-col>
  </a-form-model>

data对象:

  data() {
    return {
      validatorRules: {
        // 字段校验
        phoneNum: [{ validator: this.validatePhone }]
      },
    }
  }

methods对象:这段代码中的dataId极为重要

  methods: {
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'test_info',  // 数据库名 
            fieldName: 'phone_num',  // 数据库字段
            fieldVal: value,   // 要插入/更新的值,看看这个值在这个表中是否重复
            dataId: this.model.id  // 本次更新数据的主键,用于排除自己,dataId只在更新的时候起作用,避免自己和自己比较是否重复
          }
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback("手机号码已存在")
            }
          })
        } else {
          callback("请输入正确格式的手机号码")
        }
      }
    },
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/250284.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

编译 pywinhook v1.6.2 的环境设置和步骤

准备做一个鼠标事件响应程序。 查了一下相关python的第三方类库&#xff0c;发现有 pyhook。 一、起源 pyhook 1、pyhook是最早的版本 pyhook支持的python版本比较低&#xff0c;代码在 https://sourceforge.net/projects/pyhook/ 2、之后产生了两个并行版本 pyHook3 和 p…

从0创建并部署一个网页到服务器

创建一个页面 1 下载node.js 下载VScode 2 在Windows下找一个路径新建一个文件夹 例如&#xff1a;D:\study_project\PersonalWeb 3 VSCodee中打开文件夹 4 Windows下 管理员身份打开命令提示符&#xff0c;执行npm install -g vue/cli 5 VSCode下打开终端&#xff0c;执…

Winform高效获取控件(Control)方法 + 源码分析

背景&#xff1a;风好大&#xff0c;睡觉有点怕&#xff0c;起床敲代码了 之前学的都是都是通过遍历控件&#xff08;Controls&#xff09;&#xff0c;判断控件名是否相等来获取Control 其实直接通过:Controls["控件名"]&#xff0c;就可以获得需要的控件 为什么呢…

SQL错题集3

1.薪水第二多的员工的emp_no以及其对应的薪水salary limit a,b 其中a表示查询数据的起始位置&#xff0c;b表示返回的数量。 &#xff08;MySQL数据库中的记录是从0开始的&#xff09; 注意从0开始 2.员工编号emp_no为10001其自入职以来的薪水salary涨幅值growth 聚合函数不能…

java简易制作-王者荣耀游戏

一.准备工作 首先创建一个新的Java项目命名为“王者荣耀”&#xff0c;并在src下创建两个包分别命名为“com.sxt"、”com.stx.beast",在相应的包中创建所需的类。 创建一个名为“img”的文件夹来储存所需的图片素材。 二.代码呈现 package com.sxt; import javax…

Spring cloud - 断路器 Resilience4J

其实文章的标题应该叫 Resilience4J&#xff0c;而不是Spring Cloud Resilience4J&#xff0c;不过由于正在对Spring cloud的一系列组件进行学习&#xff0c;为了统一&#xff0c;就这样吧。 概念区分 首先区分几个概念 Spring cloud 断路器&#xff1a;Spring Cloud的官网对…

关于Linux你必须知道的五件事

Linux是一种开源操作系统 (OS)。操作系统是直接管理系统硬件和资源&#xff08;如 CPU、内存和存储&#xff09;的软件。操作系统位于应用程序和硬件之间&#xff0c;并在所有软件和执行工作的物理资源之间建立连接。 俄罗斯军方计划用 Astra Linux 取代 Windows&#xff01;为…

OceanBase数据库初识

文章目录 说明分布式数据库发展发展历史OceanBase和传统数据库的对比总结 OceanBase数据库产品简介应用案例 OceanBase数据库产品OceanBase数据库内核OceanBase开发者中心&#xff08;ODC&#xff09;产品架构OMS核心功能简介 说明 本文仅供学习和交流学习内容参考官方的培训资…

eNSP小实验(ACL和NAT)

一.ACL 实验目的&#xff1a;过滤流量&#xff0c;然后匹配规划后&#xff0c;判断该流量通过或拒绝 1.拓扑图 2.配置 基本ACL 其它同理配置 R1 [Huawei]sys R1 [R1]int g0/0/0 [R1-GigabitEthernet0/0/0]dis th [V200R003C00] # interface GigabitEthernet0/0/0 # return…

汽车租赁小程序源码租车小程序

汽车租赁小程序&#xff0c;多门店租车小程序&#xff0c;本套系统分为用户端&#xff0c;门店管理端&#xff0c;总管理后台三部分。门店可以加盟入驻平台。可以源码&#xff0c;也可以二次开发&#xff0c;也可以定制开发。php开发语言&#xff0c;前端是uniapp。用户端是小程…

智能优化算法应用:基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于闪电搜索算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.闪电搜索算法4.实验参数设定5.算法结果6.…

SpringCloud面试题——分布式事务

一&#xff1a;什么是分布式事务? 分布式事务是指在分布式系统中涉及到多个数据库或多个应用程序之间的事务处理&#xff0c;这些数据库或应用程序可能分布在不同的物理节点上&#xff0c;甚至可能位于不同的地理位置。在分布式事务中&#xff0c;需要确保所有参与者的事务操…

Docker创建镜像的方式---Dockerfile

Dockerfile可以创建自定义镜像。包括配置文件&#xff0c;挂载点&#xff0c;对外暴露的端口&#xff0c;设置环境变量。 Docker创建镜像的方式 1、 基于已有镜像创建&#xff1a;根据官方提供的镜像源&#xff0c;创建镜像。然后拉起容器。是一个白板智能提供基础的功能&…

Redis实现延迟队列

目录 一、什么是延时队列 二、延时队列的应用 三、举例说明 我的设计思想: 一、什么是延时队列 延时队列相比于普通队列最大的区别就体现在其延时的属性上&#xff0c;普通队列的元素是先进先出&#xff0c;按入队顺序进行处理&#xff0c;而延时队列中的元素在入队时会指定…

魔众文库系统v5.7.0版本文件顺序选择,短信注册支持设置密码,前端界面升级

文件顺序选择&#xff0c;短信注册支持设置密码&#xff0c;前端界面升级 [新功能] 富文本支持文档一键导入&#xff0c;支持Word文档&#xff08;docx&#xff09;、Markdown文档&#xff08;md&#xff09; [新功能] 财务中心→全部订单新增"业务订单ID"筛选条件…

10天玩转Python第7天:python 面向对象 全面详解与代码示例

今日内容 封装(定义类的过程) 案例(存放家具) 继承 多态 封装的补充 私有和公有权限属性的分类(实例属性, 类属性)方法的分类(实例方法, 类方法, 静态方法) 封装案例 # 定义家具类 class HouseItem: """家具类""" def __init__(self, name, a…

linux应用层编程问题--沙雕问题

1.调用沁恒 USB读取接口 读不到数据 static bool CH37XASyncReadData(int iIndex, uint32_t epindex, void *oBuffer, uint32_t *ioLength) {struct _bulkUp {uint32_t len;uint8_t epindex;uint8_t data[0];} __attribute__((packed));struct _bulkUp *bulkUp;int retval;bul…

zookeeper基础内容

文章目录 Zookeeper基础概述数据结构Zookeeper节点操作zookeeper节点操作命令数据模型 znode 结构 zookeeper java客户端ZooKeeper原生APICuratorzkClient对比总结 Zookeeper基础 概述 zookeeper&#xff08;分布式协调服务&#xff09; 本质&#xff1a;小型的文件存储系统监…

Android13适配所有文件管理权限

Android13适配所有文件管理权限 前言&#xff1a; 很早之前在Android11上面就适配过所有文件管理权限&#xff0c;这次是海外版升级到Android13&#xff0c;由于选择相册用的是第三方库&#xff0c;组内的同事没有上架Google的经验直接就提交代码&#xff0c;虽然功能没有问题…

3.qml 3D-Node类学习

Node类是在View3D 中的对象基础组件&#xff0c;用于表示3D空间中的对象&#xff0c;类似于Qt Quick 2D场景中的Item&#xff0c;介绍如下所示&#xff1a; 如上图可以看到&#xff0c;Node类的子类非常多&#xff0c;比如Model类(显示3D模型)、ParticleSystem3D粒子系统类、Li…