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

news/2024/7/10 0:22:06 标签: vue.js, elementui, javascript, vue, 前端

1、input类型 

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

javascript"><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里修改,相同效果

javascript"><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、点击保存按钮时,用方法触发校验

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


http://www.niftyadmin.cn/n/4961763.html

相关文章

《算法竞赛·快冲300题》每日一题:“错位排列”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码1C代码2Java代码1Java代码…

会计资料基础

会计资料 1.会计要素及确认与计量 1.1 会计基础 1.2 六项会计要素小结 1.3 利润的确认条件 1.3.1 利润的定义和确认条件 1.4 会计要素及确认条件 2.六项会计要素 2.1 资产的特征及其确认条件 这部分资产可以给企业带来经济收益&#xff0c;但是如果不能带来经济利益&#xff…

【LeetCode-中等题】3. 无重复字符的最长子串

题目 题解一&#xff1a;单指针&#xff0c;滑动窗口 思路&#xff1a; 设置一个左指针&#xff0c;来判断下一个元素是否在set集合中&#xff0c;如果不在&#xff0c;就加入集合&#xff0c;right继续&#xff0c;如果在&#xff0c;就剔除重复的元素&#xff0c;计算串的长度…

【C语言】喝汽水问题

大家好&#xff01;今天我们来学习C语言中的喝汽水问题&#xff01; 目录 1. 题目内容&#xff1a; 2. 思路分析 2.1 方法一 2.2 方法二 2.3 方法三 3. 代码实现 3.1 方法一 3.2 方法二 3.3 方法三 1. 题目内容 喝汽水&#xff0c;1瓶汽水1元&#xff0c;2个空瓶可以…

ORB-SLAM系列算法演进

ORB-SLAM算法是特征点法的代表&#xff0c;当前最新发展的ORB-SLAM3已经将相机模型抽象化&#xff0c;适用范围非常广&#xff0c;虽然ORB-SLAM在算法上的创新并不是很丰富&#xff0c;但是它在工程上的创新确实让人耳目一新&#xff0c;也能更好的为AR、机器人的算法实现落地。…

【C++】UDP通信,实现文件的传输

目录 1 TCP与UDP比较 2 UDP 3 通信流程 4 实践 5 运行结果 1 TCP与UDP比较 2 UDP简介 UDP通信是无连接的,因此不需要

Vue使用Animate.css

说一下Animate.css这个动画库&#xff0c;很多的动画在这个库里面都定义好了&#xff0c;我们用的时候可以直接使用里面的类名就可以了&#xff0c;就是直接目标元素绑定对应的类名就可以实现动画效果&#xff0c;非常方便&#xff0c;库其实也相对简单&#xff0c;使用起来也简…

WPS office 最新未公开 0Day漏洞警示

一、事件描述 近日&#xff0c;网传监测发现WPS Office for Windows版本 存在0day漏洞&#xff0c;攻击者可以利用该0day漏洞在受害者主机上执行任意恶意文件&#xff0c;高危级别&#xff0c;官方尚未对此发布修复漏洞&#xff0c;目前建议只能临时弃用wps或者不要点开未知文件…