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、问题说明: 在开发表单的时候,可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。 此时用prop绑定该字段名是无效的,需要单独对这个字段进行校验。 在el-form-item中有一个属性 error 。用于表单域验证错误信息,设…...
【VTKExamples::Points】第四期 ExtractEnclosedPoints
很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享VTK样例ExtractEnclosedPoints,并解析接口vtkExtractEnclosedPoints,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我…...
bug--xxoobject has no attribute xxx
Python 创建类的实例后却不能调用写的方法,检查了半天原来是缩进的问题,def函数不应该和class并列 只能说这个英文空格太小了,看不出来。。。。...
7 BUILD.gn文件怎么写,Gn + Ninja编译一个Hello world程序的例子Demo
BUILD.gn文件怎么写,Gn Ninja编译一个Hello world程序的例子Demo 作者将狼才鲸创建日期2024-03-11 Ninja安装流程见:一个能直接运行的Ninja例子,build.ninja文件怎么写?Gn安装流程见:Ubuntu18.04下安装Gn软件 这是一…...
北京市行政村边界shp数据/北京市乡镇边界/北京市土地利用分类数据
北京是一座有着三千多年历史的古都,在不同的朝代有着不同的称谓,大致算起来有二十多个别称。北京地势西北高、东南低。西部、北部和东北部三面环山,东南部是一片缓缓向渤海倾斜的平原。境内流经的主要河流有:永定河、潮白河、北运…...
力扣--动态规划/深度优先算法/回溯算法93.复原IP地址
这题主要用了动态规划和回溯算法。 动态规划数组初始化(DP数组): 首先,创建一个二维数组dp,用于记录字符串中哪些部分是合法的IP地址。对字符串进行遍历,同时考虑每个可能的IP地址部分(每部分由1到3个字符组…...
第一次Python小练习题目
1.打印某学校的校训,具体内容如下所示: ****************************** 勤奋 严谨 求实 创新 ****************************** 注意: 第一行和最后一行各有 30 个*号。 答案: school_strs "勤奋 严谨 求实 创新&q…...
[BUG] docker运行Java程序时配置代理-Dhttp.proxyHost后启动报错
[BUG] docker运行Java程序时配置代理-Dhttp.proxyHost后启动报错 bug现象描述 版本:2.0.4(客户端和服务端都是) 环境:私有云环境,只有少量跳板机器可以访问公网,其他机器均通过配置代理方式访问公网 bug现…...
Python网站的搭建和html基础
1.Python网站代码及讲解 一般我们搭建小型的网站就用flask库就行了。 (1)安装flask库 安装完python后,按住windows徽标键和r,弹出“运行”,在里面输入cmd。 回车打开,输入“pip install flask”。 (2&am…...
SpringCloud(21)之SpringCloud Alibaba Nacos实战应用
一、Nacos安装 1.1 Nacos概述 Nacos是Alibaba微服务生态组件中的重要组件之一,主要用它实现应用的动态服务发现、配置管理、 服务管理。Nacos discovery alibaba/spring-cloud-alibaba Wiki GitHub Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简…...
Python 基础语法:基本数据类型(元组)
1 元组(Tuples)概述 1.1 元组的定义与特点 元组(Tuples)是Python中的一个内置数据类型,用于存储一系列有序的元素。元组中的元素可以是任何类型,包括数字、字符串、列表等,且元素之间用逗号…...
vuepress-theme-vdoing博客搭建教程
搭建流程 前言 这是笔者搭建个人博客所经历的流程,特附上笔记 笔者个人博客地址:沉梦听雨的编程指南 一、主题介绍 本博客使用的主题为:vuepress-theme-vdoing,相关介绍和使用方法可以参考该主题的官方文档 官方文档快速上手…...
ICC2:create terminal参考脚本
我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 set list "" set i 0 ; set length xx set width xx foreach port $list { if {$i == 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线程(一)】什么是线程?怎样操作线程?
💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:Linux从入门到精通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学更多操作系统知识 🔝🔝 Linux线程 1. 前言2. 什么是线…...
python-0002-linux安装pycharm
下载软件包 下载地址:https://download.csdn.net/download/qq_41833259/88944791 安装 # 解压 tar -zxvf 你的软件包 # 进入软件解压后的路径,如解压到了/home/soft/pycharm cd /home/soft/pycharm cd bin # 执行启动命令 sh pycharm.sh # 等待软件启…...
扭蛋机小程序,扭蛋与互联网结合下的商机
扭蛋机作为一种娱乐消费模式,受众群体不再局限于儿童,也吸引了众多的年轻消费者。扭蛋机具有较大的随机性,玩具商品随机掉落,在购买前消费者完全不知道扭蛋中的商品是什么,这种未知性带来的惊喜感是吸引众多消费者的主…...
pytorch CV入门3-预训练模型与迁移学习
专栏链接:https://blog.csdn.net/qq_33345365/category_12578430.html 初次编辑:2024/3/7;最后编辑:2024/3/8 参考网站-微软教程: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 初识:基础语法:https://docs.swift.org/swift-book/documentation/the-swift-programming-language/guidedtour/…...
【Stable Diffusion】入门:原理简介+应用安装(Windows)+生成步骤
【Stable Diffusion】入门:原理简介应用安装(Windows)生成步骤 原理简介应用安装 原理简介 稳定扩散生成模型(Stable Diffusion)是一种潜在的文本到图像扩散模型,能够在给定任何文本输入的情况下生成照片般逼真的图像。 应用安…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
为什么要创建 Vue 实例
核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
