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

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>

相关文章:

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

1、问题说明&#xff1a; 在开发表单的时候&#xff0c;可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。 此时用prop绑定该字段名是无效的&#xff0c;需要单独对这个字段进行校验。 在el-form-item中有一个属性 error 。用于表单域验证错误信息&#xff0c;设…...

【VTKExamples::Points】第四期 ExtractEnclosedPoints

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例ExtractEnclosedPoints,并解析接口vtkExtractEnclosedPoints,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我…...

bug--xxoobject has no attribute xxx

Python 创建类的实例后却不能调用写的方法&#xff0c;检查了半天原来是缩进的问题&#xff0c;def函数不应该和class并列 只能说这个英文空格太小了&#xff0c;看不出来。。。。...

7 BUILD.gn文件怎么写,Gn + Ninja编译一个Hello world程序的例子Demo

BUILD.gn文件怎么写&#xff0c;Gn Ninja编译一个Hello world程序的例子Demo 作者将狼才鲸创建日期2024-03-11 Ninja安装流程见&#xff1a;一个能直接运行的Ninja例子&#xff0c;build.ninja文件怎么写&#xff1f;Gn安装流程见&#xff1a;Ubuntu18.04下安装Gn软件 这是一…...

北京市行政村边界shp数据/北京市乡镇边界/北京市土地利用分类数据

北京是一座有着三千多年历史的古都&#xff0c;在不同的朝代有着不同的称谓&#xff0c;大致算起来有二十多个别称。北京地势西北高、东南低。西部、北部和东北部三面环山&#xff0c;东南部是一片缓缓向渤海倾斜的平原。境内流经的主要河流有&#xff1a;永定河、潮白河、北运…...

力扣--动态规划/深度优先算法/回溯算法93.复原IP地址

这题主要用了动态规划和回溯算法。 动态规划数组初始化&#xff08;DP数组&#xff09;: 首先&#xff0c;创建一个二维数组dp&#xff0c;用于记录字符串中哪些部分是合法的IP地址。对字符串进行遍历&#xff0c;同时考虑每个可能的IP地址部分&#xff08;每部分由1到3个字符组…...

第一次Python小练习题目

1.打印某学校的校训&#xff0c;具体内容如下所示&#xff1a; ****************************** 勤奋 严谨 求实 创新 ****************************** 注意: 第一行和最后一行各有 30 个*号。 答案&#xff1a; school_strs "勤奋 严谨 求实 创新&q…...

[BUG] docker运行Java程序时配置代理-Dhttp.proxyHost后启动报错

[BUG] docker运行Java程序时配置代理-Dhttp.proxyHost后启动报错 bug现象描述 版本&#xff1a;2.0.4&#xff08;客户端和服务端都是&#xff09; 环境&#xff1a;私有云环境&#xff0c;只有少量跳板机器可以访问公网&#xff0c;其他机器均通过配置代理方式访问公网 bug现…...

Python网站的搭建和html基础

1.Python网站代码及讲解 一般我们搭建小型的网站就用flask库就行了。 &#xff08;1&#xff09;安装flask库 安装完python后&#xff0c;按住windows徽标键和r,弹出“运行”&#xff0c;在里面输入cmd。 回车打开&#xff0c;输入“pip install flask”。 &#xff08;2&am…...

SpringCloud(21)之SpringCloud Alibaba Nacos实战应用

一、Nacos安装 1.1 Nacos概述 Nacos是Alibaba微服务生态组件中的重要组件之一&#xff0c;主要用它实现应用的动态服务发现、配置管理、 服务管理。Nacos discovery alibaba/spring-cloud-alibaba Wiki GitHub Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简…...

Python 基础语法:基本数据类型(元组)

1 元组&#xff08;Tuples&#xff09;概述 1.1 元组的定义与特点 元组&#xff08;Tuples&#xff09;是Python中的一个内置数据类型&#xff0c;用于存储一系列有序的元素。元组中的元素可以是任何类型&#xff0c;包括数字、字符串、列表等&#xff0c;且元素之间用逗号…...

vuepress-theme-vdoing博客搭建教程

搭建流程 前言 这是笔者搭建个人博客所经历的流程&#xff0c;特附上笔记 笔者个人博客地址&#xff1a;沉梦听雨的编程指南 一、主题介绍 本博客使用的主题为&#xff1a;vuepress-theme-vdoing&#xff0c;相关介绍和使用方法可以参考该主题的官方文档 官方文档快速上手…...

ICC2:create terminal参考脚本

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 set list "" set i 0 ; set length xx set width xx foreach port $list { if {$i &#xff1d;&#xff1d; 0} { set startx 0 set starty 0 } else { set sta…...

并行计算CUDA DEMO

//并行计算CUDA DEMO #include "cuda_runtime.h" #include "device_launch_parameters.h" #include <stdio.h> cudaError_t addWithCuda(int *c, const int *a, const int *b, unsigned int size); __global__ void addKernel(int *c, const int …...

【linux线程(一)】什么是线程?怎样操作线程?

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux线程 1. 前言2. 什么是线…...

python-0002-linux安装pycharm

下载软件包 下载地址&#xff1a;https://download.csdn.net/download/qq_41833259/88944791 安装 # 解压 tar -zxvf 你的软件包 # 进入软件解压后的路径&#xff0c;如解压到了/home/soft/pycharm cd /home/soft/pycharm cd bin # 执行启动命令 sh pycharm.sh # 等待软件启…...

扭蛋机小程序,扭蛋与互联网结合下的商机

扭蛋机作为一种娱乐消费模式&#xff0c;受众群体不再局限于儿童&#xff0c;也吸引了众多的年轻消费者。扭蛋机具有较大的随机性&#xff0c;玩具商品随机掉落&#xff0c;在购买前消费者完全不知道扭蛋中的商品是什么&#xff0c;这种未知性带来的惊喜感是吸引众多消费者的主…...

pytorch CV入门3-预训练模型与迁移学习

专栏链接&#xff1a;https://blog.csdn.net/qq_33345365/category_12578430.html 初次编辑&#xff1a;2024/3/7&#xff1b;最后编辑&#xff1a;2024/3/8 参考网站-微软教程&#xff1a;https://learn.microsoft.com/en-us/training/modules/intro-computer-vision-pytorc…...

Swift SwiftUI 学习笔记 2024

Swift SwiftUI 学习笔记 2024 一、资源 视频资源 StanfordUnivercity 公开课 2023: https://cs193p.sites.stanford.edu/2023 教程 Swift 初识&#xff1a;基础语法&#xff1a;https://docs.swift.org/swift-book/documentation/the-swift-programming-language/guidedtour/…...

【Stable Diffusion】入门:原理简介+应用安装(Windows)+生成步骤

【Stable Diffusion】入门&#xff1a;原理简介应用安装&#xff08;Windows&#xff09;生成步骤 原理简介应用安装 原理简介 稳定扩散生成模型(Stable Diffusion)是一种潜在的文本到图像扩散模型&#xff0c;能够在给定任何文本输入的情况下生成照片般逼真的图像。 应用安…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...