当前位置: 首页 > news >正文

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

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'}],},}
}

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

在这里插入图片描述

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

在这里插入图片描述

输入汉字“无”进行校验

在这里插入图片描述

相关文章:

  • 嘿呦喂!一文了解Mysql的MVCC机制!
  • 方案分享:F5机器人防御助企业应对复杂攻击
  • FreeRTOS_任务通知
  • 如何在电脑上制作可视化待办任务清单?
  • ❤️ React的安装和使用(实战篇)
  • Redis-使用java代码操作Redis
  • LangChain+LLM实战---向量数据库介绍
  • Langchain-Chatchat-win10本地安装部署成功笔记(CPU)
  • 基于.NET、Uni-App开发支持多平台的小程序商城系统 - CoreShop
  • Mybatis-Plus自动填充功能配置和使用 [MyBatis-Plus系列] - 第494篇
  • 设计模式之策略模式(Strategy)
  • hdlbits系列verilog解答(always块case语句2)-34
  • Kotlin 进阶函数式编程技巧
  • Node.js、Chrome V8 引擎、非阻塞式I/O介绍
  • 面试问题?
  • ES6指北【2】—— 箭头函数
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • 【附node操作实例】redis简明入门系列—字符串类型
  • CSS实用技巧
  • JavaScript创建对象的四种方式
  • Java深入 - 深入理解Java集合
  • JS学习笔记——闭包
  • Laravel 菜鸟晋级之路
  • Laravel5.4 Queues队列学习
  • linux学习笔记
  • MySQL主从复制读写分离及奇怪的问题
  • PV统计优化设计
  • SAP云平台里Global Account和Sub Account的关系
  • STAR法则
  • Vue 2.3、2.4 知识点小结
  • XML已死 ?
  • 大快搜索数据爬虫技术实例安装教学篇
  • 观察者模式实现非直接耦合
  • 如何学习JavaEE,项目又该如何做?
  • 设计模式(12)迭代器模式(讲解+应用)
  • 世界上最简单的无等待算法(getAndIncrement)
  • 数据仓库的几种建模方法
  • 协程
  • 学习笔记:对象,原型和继承(1)
  • mysql面试题分组并合并列
  • 阿里云重庆大学大数据训练营落地分享
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (SpringBoot)第二章:Spring创建和使用
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (学习日记)2024.03.12:UCOSIII第十四节:时基列表
  • (一)使用IDEA创建Maven项目和Maven使用入门(配图详解)
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • .Net Core 中间件验签
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .NET建议使用的大小写命名原则
  • @Autowired和@Resource的区别
  • @Autowired自动装配
  • @GlobalLock注解作用与原理解析
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [ vulhub漏洞复现篇 ] Apache APISIX 默认密钥漏洞 CVE-2020-13945