element的表单校验证件号规则以及输入“无”的情况校验通过

news2024/11/26 9:00:02

element的表单校验证件号规则以及输入“无”的情况校验通过

  <el-col :span="6">
                                <el-form-item label="证件号码" prop="Idnumber" class="grid-content bg-purple">
                                        <el-input v-model="testForm.Idnumber" placeholder="请输入证件号码" @change="changeIdnumber"></el-input>
                                </el-form-item>
                     </el-col>

使用方法对校验数据进行过滤判断

data(){
      let CrdtNoValidar=(rule,value,callback)=>{
               if(value&&this.testForm.idtype=="001"){
                         if(value=="无"){
                            callback();
                             return
                         }
                         let reg18=/^[1-9]\[d]{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                         let reg15=/^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
                         if(reg18.test(value)||reg15.test(value)){
                            callback()
                         }else{
                            callback(new Error("请输入有效的身份证号码!"))
                         }
               }else{
                callback()
               }
         };
       return{
            rules:{
                Idnumber:[{required:false,message:'请输入证件号码',trigger:'blur'},{validator:CrdtNoValidar,trigger:'blur'}],
            },
    }
}

输入一个异常的证件号码进行校验

在这里插入图片描述

输入一个正常的证件号码进行校验

在这里插入图片描述

输入汉字“无”进行校验

在这里插入图片描述

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

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

相关文章

Spark Core

Spark Core 本文来自 B站 黑马程序员 - Spark教程 &#xff1a;原地址 第一章 RDD详解 1.1 为什么需要RDD 分布式计算需要 分区控制shuffle控制数据存储、序列化、发送数据计算API等一系列功能 这些功能&#xff0c;不能简单的通过Python内置的本地集合对象&#xff08;如…

如何使用VSCode来查看二进制文件

2023年11月6日&#xff0c;周一下午 目录 方法1&#xff1a;安装插件Binary Viewer然后用vscode打开一个二进制文件&#xff0c;并点击右上角的"HEX"方法2&#xff1a;安装插件Binary然后用vscode打开一个二进制文件&#xff0c;并点击右上角的"B" 方法1&…

如何使用群晖NAS的Audio Station结合内网穿透实现远程访问本地曲库

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是本教程使用环境&#xff1a;1 群晖系统安装audiostation套件2 下载移动端app3 内网穿透&#xff0c;映射至公网 很多老铁想在上班路上听点喜欢的歌或者相声解解闷儿&#xff0c;于是打开手…

Webpack 中 loader 的作用是什么?常用 loader 有哪些?

说说webpack中常见的Loader&#xff1f;解决了什么问题&#xff1f;- 题目详情 - 前端面试题宝典 1、loader 是什么 loader是 webpack 最重要的部分之一。 通过使用不同的 loader&#xff0c;我们能够调用外部的脚本或者工具&#xff0c;实现对不同格式文件的处理。 loader…

汽车电子中的深力科推荐一款汽车用功率MOSFET NVTFS6H888NLTAG N沟道

NVTFS6H888NLTAG MOSFET是符合AEC-Q101标准的汽车用功率MOSFET&#xff0c;采用WDFN-8封装&#xff0c;实现紧凑设计。具有低QG和电容&#xff08;最大限度地降低驱动器损耗&#xff09;和低 RDS(on)&#xff08;降低传导损耗&#xff09;。还提供可湿性侧翼选项&#xff0c;用…

OpenSign 开源 PDF 电子签名解决方案

OpenSign 是一个开源文档电子签名解决方案&#xff0c;旨在为 DocuSign、PandaDoc、SignNow、Adobe Sign、Smartwaiver、SignRequest、HelloSign 和 Zoho Sign 等商业平台提供安全、可靠且免费的替代方案。 特性&#xff1a; 安全签名&#xff1a;利用最先进的加密算法来确保…

Python 使用Scapy构造特殊数据包

Scapy是一款Python库&#xff0c;可用于构建、发送、接收和解析网络数据包。除了实现端口扫描外&#xff0c;它还可以用于实现各种网络安全工具&#xff0c;例如SynFlood攻击&#xff0c;Sockstress攻击&#xff0c;DNS查询攻击&#xff0c;ARP攻击&#xff0c;ARP中间人等。这…

Akshare获取同花顺行业

使用akshare可以很方便的获取同花顺行业列表&#xff0c;与每个行业对应的个股信息&#xff0c;流程如下&#xff1a; 使用ak.stock_board_industry_summary_ths()获取行业列表循环行业列表&#xff0c;使用ak.stock_board_industry_cons_ths()获取行业对应的个股信息 官方文…

工厂模式 rust和java的实现

文章目录 工厂模式特点介绍工厂模式包含以下几个核心角色&#xff1a;实现架构java 实现rust实现rust代码仓库 工厂模式 工厂模式&#xff08;Factory Pattern&#xff09;是最常用的设计模式之一。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方…

gitlab数据备份和恢复

gitlab数据备份 sudo gitlab-rake gitlab:backup:create备份文件默认存放在/var/opt/gitlab/backups路径下&#xff0c; 生成1697101003_2023_10_12_12.0.3-ee_gitlab_backup.tar 文件 gitlab数据恢复 sudo gitlab-rake gitlab:backup:restore BACKUP1697101003_2023_10_12_…

[C/C++]数据结构 链表OJ题: 链表分割

题目描述: 现有一链表的头指针 ListNode* pHead&#xff0c;给一定值x&#xff0c;编写一段代码将所有小于x的结点排在其余结点之前&#xff0c;且不能改变原来的数据顺序&#xff0c;返回重新排列后的链表的头指针。 解题思路: 创建两个新链表,head1,head2, 遍历原链表,把小于…

Hive从入门到大牛【Hive 学习笔记】

文章目录 什么是HiveHive的数据存储Hive的系统架构MetastoreHive VS Mysql数据库 VS 数据仓库 Hive安装部署Hive的使用方式命令行方式JDBC方式 Set命令的使用Hive的日志配置Hive中数据库的操作Hive中表的操作 Hive中的数据类型基本数据类型复合数据类型ArrayMapStructStruct和M…

第三方美颜SDK是什么?在直播平台中有哪些应用?

第三方美颜SDK已经成为许多应用和平台的核心功能之一&#xff0c;它们为用户提供了一种改善自己在直播和视频分享中外表的方式。本文将探讨第三方美颜SDK是什么&#xff0c;以及它们在直播平台中的各种应用。 一、什么是第三方美颜SDK&#xff1f; 第三方美颜SDK是一组软件工…

[动态规划] (十) 路径问题 LeetCode 174.地下城游戏

[动态规划] (十) 路径问题: LeetCode 174.地下城游戏 文章目录 [动态规划] (十) 路径问题: LeetCode 174.地下城游戏题目解析解题思路状态表示状态转移方程初始化和填表顺序返回值 代码实现总结 174. 地下城游戏 题目解析 先明白下题题再来看。 [动态规划] (四) LeetCode 91.…

RK3568平台 内存的基本概念

一.Linux的Page Cache page cache&#xff0c;又称pcache&#xff0c;其中文名称为页高速缓冲存储器&#xff0c;简称页高缓。page cache的大小为一页&#xff0c;通常为4K。在linux读写文件时&#xff0c;它用于缓存文件的逻辑内容&#xff0c;从而加快对磁盘上映像和数据的访…

搭建个人hMailServer邮件服务实现远程发送邮件

文章目录 前言1. 安装hMailServer2. 设置hMailServer3. 客户端安装添加账号4. 测试发送邮件5. 安装cpolar6. 创建公网地址7. 测试远程发送邮件8. 固定连接公网地址9. 测试固定远程地址发送邮件 前言 hMailServer 是一个邮件服务器,通过它我们可以搭建自己的邮件服务,通过cpola…

【hcie-cloud】【2】华为云Stack解决方案介绍、缩略语整理 【下】

文章目录 华为文档获取方式、云计算发展背景、坚实基座华为云Stack&#xff0c;政企只能升级首选智能数据湖仓一体&#xff0c;让业务洞见更准&#xff0c;价值兑现更快MRS&#xff1a;一个架构可构建三种数据湖&#xff0c;业务场景更丰富离线数据湖&#xff1a;提供云原生、湖…

Javaweb之javascript的详细解析

JavaScript html完成了架子&#xff0c;css做了美化&#xff0c;但是网页是死的&#xff0c;我们需要给他注入灵魂&#xff0c;所以接下来我们需要学习JavaScript&#xff0c;这门语言会让我们的页面能够和用户进行交互。 1.1 介绍 通过代码/js效果演示提供资料进行效果演示&…

微信小程序自动化采集方案

本文仅供学习交流&#xff0c;只提供关键思路不会给出完整代码&#xff0c;严禁用于非法用途&#xff0c;拒绝转载&#xff0c;若有侵权请联系我删除&#xff01; 一、引言 1、对于一些破解难度大&#xff0c;花费时间长的目标&#xff0c;我们可以先采用自动化点击触发请求&…

【LeetCode】每日一题 2023_11_6 最大单词长度乘积

文章目录 刷题前唠嗑题目&#xff1a;最大单词长度乘积题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;最大单词长度乘积 题目链接&#xff1a;318. 最大单词长度乘积 题目描述 代码与解题思路…