elementUI中表单校验中,所有空值校验在用户点击“确定”按钮时才触发,失去焦点时只有有值,才进行其它有效性校验;

elementUI 根据选择的内容判断某些字段,需不需要加校验。 //比如需要根据这个下拉框的值,来决定是否要加必填校验的时候用 @change="Educationclick" //isrequired 这个随便起名字。。 // data里面定义 isrequired : 2, //默认false非必填 <el-form-item label="性格:" label-width="70px" prop="CharacterCode" :rules="{ required: isrequired= 阅读详情

现在有这样一个变态的需求吧,在elementUI表单校验中,所有空值校验在用户点击“确定”按钮时才触发,失去焦点时只有有值,才进行其它有效性校验;
也就是说,必填项为空,我失去焦点,是不能给出提示的,表单也不能标红;失去焦点只能校验其他规则,比如邮箱格式,手机号格式等;当我点击提交或确定按钮,所有的为空的表单给出提示,且标红。
下图为效果图:
在这里插入图片描述
如果你看过elementUI底层源码,你就知道这个校验规则是用的第三方开源库,async-validator
在这里插入图片描述
当你在规则中写入{ required: true, trigger: ‘blur’ }
他还是会有提示信息。 这时候你会发现是不能进行通过改底层代码来实现这个特殊的需求。

下面介绍一下如何实现:
方式一: 简便,适合复杂表单
思路: 在表单元素input标签或者其他绑定v-model的标签上加入

:validate-event="这里写三目运行进行设置为true还是false"
false代表不校验,true代表检验

具体代码如下:

<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
      {
   
    required: true, message: '请输入邮箱地址', trigger: 'blur' },
      {
   
    type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
      >
        <el-input v-model="form.email" :validate-event="form.email==''?false:true"></el-input>
      </el-form-item>
      <el-form-item
        label="域名"
        prop="domains"
        :rules="{
   
   
          required: 
表单验证(失去焦点)          Title                     $(function () {             // 全局变量用来接收判断二次密码             var PASS = "";             // 提交判断是否输入合法             var k = 0;             /*正则验证邮箱 阅读详情

相关推荐

element-ui form 表单验证--输入空格问题

<el-form :rules="rules"> <el-form-item label="名称" prop="name"> <el-input size="small" v-model.trim="form.name" placeholder="请输入名称"></el-input> </el-form-item> </el-form> v-model.lazy 只有在input输入框发生blur事件时才触发 v-.

代码青春 5433

基于深度学习的UWB门禁检测

针对基于UWB技术智能门禁管理系统,由于测距误差或非视距原因导致门禁产生不合理动作的现象。分析如何采用基于深度学习的方法,通过对TWR测距数据、TWR监听数据、到达角度差(PDOA)、信道脉冲响应(CIR)等数据维度进行深度学习,利用 TensorFlow建立相应的推导模型,对卡片姿态进行更加精准可靠的检测,从而更好完成闸机开合控制。

tenth_quadrant的博客 2027

麒麟V10等保三级配置实战:从auditd规则到PAM锁定的可信基线构建

Linux安全基线是信息系统可信运行的基础能力,其核心在于身份鉴别、访问控制与安全审计三大机制的协同落地。在国产化信创环境中,麒麟V10作为深度适配飞腾/鲲鹏平台的操作系统,其等保三级合规并非简单套用CentOS加固脚本,而是需围绕内核审计(auditd)、可插拔认证模块(PAM)及国产安全增强机制(如kysec)进行精细化编排。技术价值体现在将抽象条款(如GB/T 22239-2019中6.1.2、6.3.3条)转化为可验证的命令行操作,确保登录失败可锁定、关键行为可追溯、时间偏差不致日志失效。典型应用场

weixin_29969209的博客 597

Truncated SVD for faster dection

Truncated SVD方法最先被提出在《Fast R-CNN》论文中,用于降低全连接层的运算量,提升模型的速度。在卷积神经网络的分类任务中,FC层的运算速度远远大于CONV层,而在Fast R-CNN的目标检测任务中,大多数的运算时间发生在FC 的运算中,是因为针对每张输入图片,只进行一次卷积操作,而要对生成的Region Proposal,大致两千个,进行全连接操作进行分类与Bounding...

weixin_35747666的博客 1535

删除win10电脑U盘使用记录

手工删除:和查看的方法类似,分三步,缺一不可,顺序也不能反! 第一步 设置环境变量,变量名为“devmgr_show_nonpresent_devices”,值为“1”。 第二步 打开设备管理器,勾上“查看”菜单中的“显示隐藏设备”。如果之前已经打开设备管理器,则要关了,重新打开。 第三步 清除“磁盘驱动器”、“存储卷”、“通用串行总线控制器”3个栏目下所有的灰色的图标,注意是所有!右键点击灰色图标,然后选择“卸载”。 成功 :结果USBSTOR 没有了 ...

qq_40544338的博客 2万+

告别环境报错:用Pycharm一站式搞定Superset 3.0.0二次开发环境(Windows/Mac通用)

本文详细介绍了如何使用Pycharm一站式搭建Apache Superset 3.0.0的二次开发环境,涵盖Windows和Mac平台。通过虚拟环境配置、依赖管理、数据库初始化及前后端协同开发等步骤,帮助开发者高效解决环境报错问题,提升开发效率。特别适合需要进行Superset二次开发的工程师参考。

weixin_42549496的博客 316

微信本地数据解密实战:从AES加密原理到EnMicroMsg.db恢复指南

数据加密是保障信息安全的核心技术,其中对称加密算法AES因其高效可靠,被广泛应用于各类本地数据保护场景。其原理是通过特定密钥对数据进行混淆转换,确保未经授权者无法读取原始内容。在移动应用领域,本地数据库加密对于保护用户隐私、防止数据泄露具有重要价值。微信作为国民级应用,对其本地存储的聊天记录数据库(EnMicroMsg.db)采用了基于设备标识和用户UIN生成的AES-256-CBC加密方案。理解这一机制,不仅有助于在合法合规前提下进行个人数据备份与恢复,也为开发者进行客户端安全分析、兼容工具开发提供了基础

weixin_30764883的博客 571

2、TCGA数据处理(差异分析前处理)

注意:1、是R语言中用于读取文本文件并创建数据框的函数。它可以从文本文件中读取数据并将其存储为数据框的形式,每一列代表一个变量,每一行代表一个观察值。2、括号要成对,不能少了;3、file = 'TCGA-LIHC.htseq_counts.tsv'引号可以是单或双引号,建议单;4、逗号主要中英文,都是用英文模式才没错;5、.tsv文件类型必须要有,不能删除,否则读不进来;6、上面代码将TCGA-LIHC.htseq_counts.tsv文件读入并赋值给count1。

PLW_12的博客 2668

让 RAP 弹窗参数真正变成必填:Excel Upload Action 的两种实现路径

摘要 在RAP应用中,action弹窗参数经常缺乏必填校验,导致用户体验差。本文提出两种解决方案:1)在action实现中手动校验,简单但交互不流畅;2)通过root abstract entity和abstract BDEF建模,利用field(mandatory)实现框架级校验,推荐此长期方案。后者将约束集中到模型层,使UI与执行期校验一致,特别适合ABAP Cloud环境。以Excel导入为例,强制填写备注和明确选择试运行,可避免审计问题,提升系统可靠性。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 199

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

上一篇: 自定义日期组件,左右按钮控制向前或向后翻年、翻月、翻周、翻日
下一篇: elementUI中,表格内容太多,导致气泡会出现闪烁,或者显示不全问题解决
别忘了微笑_cuicui
博客等级 码龄8年 227粉丝 99原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值