el-form表单中,对非表单内字段增加校验的方法

1、问题说明:

在开发表单的时候,可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。

此时用prop绑定该字段名是无效的,需要单独对这个字段进行校验。

在el-form-item中有一个属性 error 。用于表单域验证错误信息,设置该值会使表单验证状态变为error,并显示该错误信息。

2、方法:

(1)设置required,给label增加校验的*图标

(2)设置error属性,初始值设为空,在表单校验时做一个判断,如果字段为空时给error赋值校验失败提示文字。

(3)同时加一个失去焦点时的方法 @blur="" (input输入框,select下拉框用change事件,其他的根据情况选择事件),在进行表单操作时也做校验。

3、代码

<template><el-form ref="form" :rules="rules" :model="form" label-width="110px">
<!--    1、设置required :error="customError"--><el-form-item label="非表单校验" required :error="customError"><el-input v-model="customValid" @blur="checkCustomValid"></el-input></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">确定</el-button><el-button>取消</el-button></el-form-item></el-form>
</template>
<script>
export default {data() {return {form: {desc: ''},rules: {desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]},// 要非表单校验的参数customValid: '',// 显示非表单校验的内容customError: ''}},methods: {// 2、非表单校验checkCustomValid(){if (!this.customValid.trim()) {this.customError = '非表单校验不能为空'return false} else {this.customError = ''return true}},// 提交onSubmit() {this.$refs.form.validate((valid) => {// 3.提交校验this.checkCustomValid()if (this.checkCustomValid() && valid) {alert('submit!');} else {console.log('error submit!!');return false;}});}}
}
</script>

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

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

相关文章

Java SE入门及基础(37)

Object 类常用方法 Object类中定义的方法大多数都是属于 native 方法&#xff0c; native 表示的是本地方法&#xff0c;实现方式是在 C 中。 1. getClass() public final Class getClass () //The getClass() method returns a Class object, which has methods you can…

【算法】KY67 整数奇偶排序

描述 输入10个整数&#xff0c;彼此以空格分隔。重新排序以后输出(也按空格分隔)&#xff0c;要求: 1.先输出其中的奇数,并按从大到小排列&#xff1b; 2.然后输出其中的偶数,并按从小到大排列。 输入描述&#xff1a; 任意排序的10个整数&#xff08;0&#xff5e;100&#x…

灰度发布难以追踪?你可能用错了工具

灰度发布进行可观测性的主要方式是通过收集和分析用户在使用新版本产品或服务时的数据&#xff0c;以此来评估新版本的性能、稳定性和用户满意度。这个过程通常包括以下几个步骤&#xff1a; 定义观测指标&#xff1a;首先&#xff0c;需要定义一套合适的观测指标&#xff08;…

Java Day7 常用API

文章目录 1、Arrays1.1 简述1.2 如何比较对象数组1.2.1 方法1.1.2.2 方式2 2、Lambda3、方法引用3.1 静态方法的引用3.2 实例方法引用3.3 特定类型方法引用3.4 构造器引用 1、Arrays 1.1 简述 操作数组的一个工具类 常见方法 int[] arr{10,20,30,50,40};//将 数组的内容 组…

彩色gif闪图怎么做?分享gif动画的方法

在现在的媒体时代&#xff0c;动态图片已经成为了最流行的分享信息的方式。能够传达动态的视觉效果。那种带有动态效果的闪动文字图片要怎么制作呢&#xff1f;很简单&#xff0c;通过使用在线制作闪字图片工具&#xff0c;上传多张文字内容相同&#xff0c;颜色、位置不同的jp…

【网络原理】使用Java基于TCP搭建简单客户端与服务器通信

目录 &#x1f384;API介绍&#x1f338;ServerSocket API&#x1f338;Socket API &#x1f340;TCP中的长短连接&#x1f333;建立TCP回显客户端与服务器&#x1f338;TCP搭建服务器&#x1f338;TCP搭建客户端 ⭕总结 TCP服务器与客户端的搭建需要借助以下API &#x1f384;…

C语言函数—库函数

函数是什么&#xff1f; 数学中我们常见到函数的概念。但是你了解C语言中的函数吗&#xff1f; 维基百科中对函数的定义&#xff1a;子程序 在计算机科学中&#xff0c;子程序&#xff08;英语&#xff1a;Subroutine, procedure, function, routine, method, subprogram, ca…

VSCode调试C++项目时无法显示长字符串的所有内容

记录一次失败的尝试&#xff0c;参考解决vs code 调试golang时字符串显示不全的问题。_golang gin buf数据不全-CSDN博客 但是笔者当前使用的VSCode版本不支持在launch.json中添加dlvLoadConfig选项 笔者的思路是如果VSCode不支持&#xff0c;那就下降到下一层&#xff0c;VSC…

c++初阶------类和对象(下)

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…

判断、v-if判断显示隐藏,功能区循环案例。

判断条件 1.第一种 如果身份是管理员 &#xff0c; 那么全部显示 如果身份是员工 &#xff0c;那么除了value等于1的全部都显示 v-if"( user.state.level admin) || ( user.state.level staff && item.value ! 1)"<view class"funcBox">&…

Solidity Uniswap V2 factory contract

factory contract 工厂合约是所有已部署pair合约的注册表。我们不希望出现相同的pair&#xff0c;这样流动性就不会被分割成多个。factory合约还简化了pair合约的部署&#xff1a;无需手动部署pair合约&#xff0c;只需调用factory合约中的方法即可。 https://github.com/XuHug…

马斯克将在本周,开源类ChatGPT产品Grok

3月11日晚&#xff0c;马斯克在社交平台宣布&#xff0c;将在本周开源生成式AI产品——Grok。 Grok是马斯克旗下公司xAI在去年11月发布的&#xff0c;一款类ChatGPT产品&#xff0c;可以提供生成文本、代码、邮件、信息检索等功能。其测试性能超过GPT-3.5、LLaMA 2 70B&#x…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的铁轨缺陷检测系统(Python+PySide6界面+训练代码)

摘要&#xff1a;开发铁轨缺陷检测系统对于物流行业、制造业具有重要作用。本篇博客详细介绍了如何运用深度学习构建一个铁轨缺陷检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&#xff0c;展示了不同模…

Linux运维:深入了解 Linux 目录结构

Linux运维&#xff1a;深入了解 Linux 目录结构 一、 Linux 目录结构与 Windows之间的主要区别二、Linux根目录结构三、常见目录及其作用 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 一、 Linux 目录结构与 Windows之间的主要区别 1、根…

2024年备考软考,别犯这些常见错误!

距离2024年上半年软考正式考试还剩不到八十天的时间&#xff0c;留给考生的备考时间越来越少&#xff0c;因此大家在学习时要避免犯一些常见错误&#xff0c;尽量不浪费宝贵的学习时间&#xff0c;科学备考。 误区一&#xff1a;不制定学习计划 不制定学习计划意味着缺乏系统…

Kafka常见使用问题

消息丢失 生产者方&#xff1a;设置ack为1或-1/all可以防止生产的消息丢失&#xff0c;如果要做到生产消息成功率提高到最高&#xff0c;ack设置成all&#xff0c;把min.insync.replicas配置成分区备份数&#xff0c;把ack设置成1或者-1/all&#xff0c;这样生产者生产的消息发…

vivado clock ip核的使用

clock 偶数倍分频就是进行计数器计数&#xff0c;奇数倍分频如果不要求占空比的话也是进行计数&#xff0c;如果要求0.5的占空比的话&#xff0c;则需要进行两个计数器&#xff0c; 对于实现占空比为50%的N倍奇数分频&#xff0c;我们可以分解为两个通道&#xff1a; 上升沿触…

数据拯救指南:解决文件或目录损坏且无法读取的终极策略

在日常的计算机使用中&#xff0c;我们经常会遇到文件或目录损坏且无法读取的困扰。当这类问题发生时&#xff0c;无论是重要的文档、照片还是视频文件&#xff0c;都可能会变得无法访问&#xff0c;给我们的工作和生活带来极大的不便。面对这种情况&#xff0c;我们首先需要了…

落地灯哪个牌子好?五款品质可靠的落地灯,各具亮点

近年来&#xff0c;落地灯作为最适合目前用眼人群使用的照明电器&#xff0c;以显著的照明效果获得了广泛认可&#xff0c;并成为众多学生党、上班族用眼时的必备工具。其受欢迎的程度不断攀升&#xff0c;促使越来越多的人都选择入手落地灯。然而&#xff0c;我发现市场上也有…

关于JSP的打印调试,再来一篇巩固巩固

JSP实质上就是html混入了Java&#xff0c;或者说是HTMLJavaScriptCSSJava的混合⽂件&#xff0c;那么就会牵扯到各种语言之间的变量引用问题&#xff0c;既然基础是html&#xff0c;那么就先看看html怎么引用其他内容&#xff0c;以及其他内容间值的互引用。 1、Html获取JavaS…