element的表单校验正常手机号码以及输入框填写“不详”的情况

news2024/11/27 7:39:16

element的表单校验正常手机号码以及输入框填写“不详”的情况

<el-col :span="6">
                                <el-form-item label="手机号码" prop="phoneNumber" class="grid-content bg-purple">
                                        <el-input v-model="testForm.phoneNumber" placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                     </el-col>
data(){
         let phoneNumberValider=(rule,value,callback)=>{
                    if(value!=""){
                         if(value=="不详"){
                              callback();
                              return
                         }
                         let reg11=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                         if(reg11.test(value)){
                                callback()
                         }else{
                             callback(new Error("请输入正确格式手机号!"))
                         }
                    }else{
                             callback()
                    }
         };
       return{
            rules:{
                 phoneNumber:[{required:true,message:'请输入手机号码',trigger:'blur'},{validator:phoneNumberValider,trigger:'blur'}],
            },
    }
}

输入一个异常的手机号码进行校验在这里插入图片描述

输入一个正常的手机号码进行校验

在这里插入图片描述

输入汉字“不详”进行校验

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux环境下的SVN服务器搭建并结合内网穿透实现远程连接

文章目录 前言1. Ubuntu安装SVN服务2. 修改配置文件2.1 修改svnserve.conf文件2.2 修改passwd文件2.3 修改authz文件 3. 启动svn服务4. 内网穿透4.1 安装cpolar内网穿透4.2 创建隧道映射本地端口 5. 测试公网访问6. 配置固定公网TCP端口地址6.1 保留一个固定的公网TCP端口地址6…

第四章 Web服务器(1)

1.www简介 Web网络服务也叫WWW(World Wide Web 全球信息广播)万维网服务&#xff0c;一般是指能够让用户通过浏览器访问到互联网中文档等资源的服务 Web 网络服务是一种被动访问的服务程序&#xff0c;即只有接收到互联网中其他主机发出的请求后才会响应&#xff0c;最…

LINQ to SQL系列三 使用DeferredLoadingEnabled,DataLoadOption指定加载选项

介绍linq to sql 的 DataContext类DeferredLoadingEnabled属性使用,以及DataLoadOptions限定加载相关表数据的LoadWith和AssociateWith方法。 本文中举例用到的数据模型如下: Student和Class之间是多对一关系,Student和Course之间是多对多关系。 DataContext的DeferredLo…

使用oracle虚拟机添加新硬盘

1、关闭运行的虚拟机后配置 单击选择要配置的oracle虚拟机&#xff0c;单击设置–>存储—>控制器&#xff0c;单击添加虚拟硬盘图标。 2、配置硬盘 单击“创建”&#xff0c;单击“下一步”&#xff0c;选择需要创建的虚拟硬盘大小&#xff0c;完成创建。 完成创建后…

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(一)

熟悉项目环境 1. 苍穹外卖项目介绍1.1 项目介绍1.2 技术选型 2. 开发环境搭建2.1 前端环境2.2 后端环境搭建2.3 Git版本控制2.4 nginx反向代理和负载均衡 3.登录功能4. Swagger4.1 介绍4.2 使用步骤4.3 常用注解 1. 苍穹外卖项目介绍 1.1 项目介绍 苍穹外卖是专门为餐饮企业&…

SRC | CORS跨资源共享漏洞

CORS跨资源共享 跨源资源共享 (CORS) 是一种浏览器机制&#xff0c;允许网页使用来自其他页面或域的资产和数据。 大多数站点需要使用资源和图像来运行它们的脚本。这些嵌入式资产存在安全风险&#xff0c;因为这些资产可能包含病毒或允许服务器访问黑客。 CORS响应头 CORS通…

C-DS二叉树_另一棵树的子树

Description 给你两棵二叉树tree1和tree2,检验tree1中是否包含和tree2具有相同结构和结点值的子树。如果存在,输出true;否则,输出false。 Input 第一行输入t,表示有t个测试样例。 第二行首先输入n1,接着输入n1个整数,表示二叉树tree1。 第三行首先输入n2,接着输入n…

Keras人工智能神经网络 Classifier 分类 神经网络搭建

前期我们分享tensorflow以及pytorch时&#xff0c;分享过tensorflow以及pytorch的分类神经网络的搭建步骤&#xff0c;在哪里我们使用的训练集是mnist&#xff0c;同样Keras分类神经网络的搭建&#xff0c;我们同样使用mnist数据集来进行分类神经网络的搭建&#xff08;有关mni…

【NI-DAQmx入门】NI-DAQmx之Python

NI-DAQmx Python GitHub资源&#xff1a; NI-DAQmx Python 文档说明&#xff1a;NI-DAQmx Python Documentation — NI-DAQmx Python API 0.9 documentation nidaqmx支持 CPython 3.7和 PyPy3&#xff0c;需要注意的是多支持USB DAQ和PCI DAQ&#xff0c;cDAQ需要指定…

改进的yolov5

The networkstructure of these models is constant, but the modules and con-volution kernels are scaled, which alters the complexity and sizeof each model.&#xff08;这些模型的网络结构是恒定的&#xff0c;但模块和卷积核被缩放&#xff0c;这改变了每个模型的复杂…

自动驾驶算法(五):基于遗传算法的路径规划(上)

目录 1 遗传算法介绍 2 遗传算法代码详解--绘制地图与种群初始化代码讲解 1 遗传算法介绍 模拟生物进化过程&#xff0c;物竞天择&#xff0c;适者生存。 我们先为栅格地图进行编码&#xff1a;从起点0出发到终点24这个栅格。我们首先有一条路径&#xff08;0&#xff0c;6&a…

最近面了12个人,发现连这种基础题都答不上来.....

一般面试我都会问一两道很基础的题目&#xff0c;来考察候选人的“地基”是否扎实&#xff0c;有些是操作系统层面的&#xff0c;有些是 python语言方面的&#xff0c;还有些… 深耕IT行业多年&#xff0c;我们发现&#xff0c;对于一个程序员而言&#xff0c;能去到一线互联网…

golang工程中间件——redis常用结构及应用(string, hash, list)

Redis 命令中心 【golang工程中间件——redisxxxxx】这些篇文章专门以应用为主&#xff0c;原理性的后续博主复习到的时候再详细阐述 string结构以及应用 字符数组&#xff0c;redis字符串是二进制安全字符串&#xff0c;可以存储图片等二进制数据&#xff0c;同时也可以存…

ns3入门基础教程

ns3入门基础教程 文章目录 ns3入门基础教程ns环境配置测试ns3环境ns3简单案例 ns环境配置 官方网站&#xff1a;https://www.nsnam.org/releases/ 代码仓库&#xff1a;https://gitlab.com/nsnam/ns-3-dev 如果安装遇到问题&#xff0c;可以参考以下博文&#xff1a; https://…

19、Flink 的Table API 和 SQL 中的内置函数及示例(1)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

吴恩达《机器学习》6-4->6-7:代价函数、简化代价函数与梯度下降、高级优化、多元分类:一对多

一、代价函数 逻辑回归的代价函数是用来度量模型预测与实际结果之间的差异的。与线性回归使用均方误差不同&#xff0c;逻辑回归使用的代价函数在数学上更为复杂。为了理解逻辑回归的代价函数&#xff0c;首先要明白逻辑回归的假设函数&#xff1a; ℎ&#x1d703;(&#x1…

【高德地图API】JS高德地图API实现多边形绘画,高德获取多边形提交数据

目录 前言效果实现引入js 在项目中使用效果图引入htmlCSS具体实现JS调用说明添加的时候修改的时候判断是否在范围内 java绘画和判断是否在范围内pom.xml依赖引入import引入实现 前言 高德地图官方API&#xff1a;https://lbs.amap.com/demo/javascript-api/example/overlayers…

计算机编程软件编程基础知识,中文编程工具下载分享

计算机编程软件编程基础知识&#xff0c;中文编程工具下载分享 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&#xff0c;象如图这个实例…

LangChain+LLM实战---用AI(大模型)重构推荐系统

原文&#xff1a;Reimagining the Recommendation Engine AI助手的崛起 人工智能正在改变我们与在线应用程序互动的方式。目前&#xff0c;我们使用搜索引擎、新闻源和精心设计的菜单来导航&#xff0c;这些菜单引导我们找到所需的信息或服务。然而&#xff0c;我相信目前人工…

【IK分词器安装】

安装IK分词器&#xff1a; 下载链接&#xff08;如果es版本不同可以修改下版本号&#xff09;&#xff1a;https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.12.1/elasticsearch-analysis-ik-7.12.1.zip 通常下载是比较慢的&#xff1a;有需要可以从…