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

el-form表单验证:只在点击保存时校验(包含select、checkbox、radio)

1、input类型 

 input类型  在el-input里加入:validate-event="false"

<el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name" :validate-event="false"></el-input>
</el-form-item>

2、select、radio、checkbox、date类型 

在el-form-item中将rules里的trigger 修改为blur,不要加change方法即可改变值不触发校验

或者在data的rules里修改,相同效果

<el-form-item label="活动区域" prop="region" :rules=" {{ required: true, message: '请选择活动区域', trigger: 'blur' }"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item>或者在data中修改rules配置相同效果
data() {return {rules: {region: [{ required: true, message: '请选择活动区域', trigger: 'blur' }],
}}}

 3、点击保存按钮时,用方法触发校验

**在点击确定按钮的时候,触发函数,然后进行验证**
handleSave () {this.$refs.form.validate((valid) => {if (valid) {// 校验成功} else {//校验失败}})},

http://www.lryc.cn/news/136603.html

相关文章:

  • Golang基本语法(上)
  • jenkins使用
  • 多线程基础篇(包教包会)
  • Android/Java中,各种数据类型之间的互相转换,给出各种实例,附上中文注释
  • 机器学习知识点总结:什么是EM(最大期望值算法)
  • 漏洞挖掘和安全审计的技巧与策略
  • [SpringBoot3]Web服务
  • 构建系统自动化-autoreconf
  • Mysql之InnoDB和MyISAM的区别
  • Unity 之 Transform.Translate 实现局部坐标系中进行平移操作的方法
  • PostgreSQL Error: sorry, too many clients already
  • Vue2(路由)
  • 中介者模式-协调多个对象之间的交互
  • Python框架【自定义过滤器、自定义数据替换过滤器 、自定义时间过滤器、选择结构、选择练习、循环结构、循环练习、导入宏方式 】(三)
  • 红黑树遍历与Redis存储
  • 前端处理图片文件的方法
  • 「Java」《深入解析Java多线程编程利器:CompletableFuture》
  • Docker容器与虚拟化技术:容器运行时说明与比较
  • vue导出文件流获取附件名称并下载(在response.headers里解析filename导出)
  • ​山东省图书馆典藏《乡村振兴战略下传统村落文化旅游设计》鲁图中大许少辉博士八一新书
  • 2023-08-19力扣每日一题-水题/位运算解法
  • Hadoop学习:深入解析MapReduce的大数据魔力之数据压缩(四)
  • LRU淘汰策略执行过程
  • Kotlin 高阶函数详解
  • DL——week2
  • 如何撰写骨灰级博士论文?这是史上最全博士论文指导!
  • 08.SpringBoot请求相应
  • C#详解-Contains、StartsWith、EndsWith、Indexof、lastdexof
  • FATE框架中pipline基础教程
  • Atlas 元数据管理